Any Thing Slider In Liferay

Creating Anything Slider slide show using  jQuery+ Web Content Structure.

Demo Page : http://css-tricks.com/examples/AnythingSlider/

 

 

First include js files in theme :

--Copy jquery.min.js and jquery.anythingslider.js and paste it

\liferay-portal-6.0.5\tomcat-6.0.26\webapps\ROOT\html\themes\classic\js

          --Update portal_normal.vm file 

            #js("$javascript_folder/jquery.min.js")

            #js("$javascript_folder/jquery.anythingslider.js")

            class="$css_class">

Second Include css in theme :

--Copy anythingsliderliferay.css and paste it in

liferay-portal-6.0.5\tomcat-6.0.26\webapps\ROOT\html\themes\classic\css

--Update main.css file ..

 

          @import url(anythingsliderliferay.css);

          

Third provide images for css ..

--create folder ‘anythingslider’ in liferay-portal-6.0.5\tomcat-6.0.26\webapps\ROOT\html\themes\classic\images

-- Make sure css are properly pointing to this images.

Start your tomcat:

Login as admin:

Create a page and drop a web content display portlet on it.

Create web content as :

   

<style type="text/css">

#slider { width: 700px; height: 390px; }style>

<script>

              // DOM Ready

              $(function(){

                     jQuery('#life-slider').anythingSlider();

              });

       script><ul id="life-slider">

       <li>

              <img alt="" src="/image/image_gallery?uuid=4b0986ff-b855-440f-b105-df6118ecdcbf&groupId=10156&t=1328248208609" />li>

       <li>

              <img alt="" src="/image/image_gallery?uuid=3738fc24-2b40-4b33-9642-99dae0c612d4&groupId=10156&t=1328248208609" />li>

       <li>

              <img alt="" src="/image/image_gallery?uuid=61dc4420-78a0-4f9e-9415-4d2b24823338&groupId=10156&t=1328248208609" />li>

       <li>

              <img alt="" src="/image/image_gallery?uuid=2d1e887b-1504-4982-9335-21ef36d8b8f2&groupId=10156&t=1328248208609" />li>

ul>

 

Select images from Image Gallery or from Server.

Save and Publish.

Done…..