JCarousal in Zk+Liferay portlet

Now lets make JCarousal in our zk Liferay portlet...

I have use refrence of this site to make this Carousal.You can download all the necessary js and css from this site.
Lets start step by step...

1)Download necessary files as well as the images of next and previous button from that site you can use firebug also to download those stuff. 

2)Download  jquery.jcarousel.min.js and jQuery.js and put these files in docroot/js folder.

3) Update liferay-portlet.xml as given below:

 <?xml version="1.0"?>  
 <!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.1.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_1_0.dtd">  
   <liferay-portlet-app>   
     <portlet>   
       <portlet-name>zk-hello-world</portlet-name>   
       <icon>/icon.png</icon>   
       <instanceable>false</instanceable>   
       <header-portlet-css>/css/main.css</header-portlet-css>   
       <header-portlet-javascript>/zkau/web/js/zk.wpd</header-portlet-javascript>   
       <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>   
       <footer-portlet-javascript>/js/jquery-1.8.3.min.js</footer-portlet-javascript>   
       <footer-portlet-javascript>/js/jquery.jcarousel.min.js</footer-portlet-javascript>   
       <css-class-wrapper>zk-hello-world-portlet</css-class-wrapper>  
     </portlet>   
     <role-mapper>   
       <role-name>administrator</role-name>   
       <role-link>Administrator</role-link>   
     </role-mapper>   
     <role-mapper>   
       <role-name>guest</role-name>   
       <role-link>Guest</role-link>   
     </role-mapper>   
     <role-mapper>   
       <role-name>power-user</role-name>   
       <role-link>Power User</role-link>   
     </role-mapper>   
     <role-mapper>   
       <role-name>user</role-name>   
       <role-link>User</role-link>   
     </role-mapper>   
   </liferay-portlet-app>  

4)Add The content of the skin.css to docroot/css/main.css file.

In that we have to change just each  url of the images like given below:

  just check the format of the url /{portlet-name}/images/{name of the image}

5) You have to download that images named next-horizontal.png and prev-horizontal.png likewise from  the above site and put those images in docroot/images folder.

6) Update the view.zul as given below:

 <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>  
 <zk xmlns:html="http://www.w3.org/1999/xhtml">  
 <window title="jcarousel" id="window" apply="com.liferay.zk.controller.ZkController">  
 <div class=" jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">  
 <html:ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 950px;">  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="1"><image width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="2"><image width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="3"><image width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="4"><image width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="5"><image width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="6"><image width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="7"><image width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="8"><image width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="9"><image width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg"></image></html:li>  
   <html:li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="10"><image width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg"></image></html:li>  
  </html:ul>  
  </div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;"></div>  
  <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div></div>  
  </div>  
 </window>  
 </zk>  

7)Update the content of the ZkController.java as given below:

 package com.liferay.zk.controller;  
 import org.zkoss.zk.ui.select.SelectorComposer;  
 import org.zkoss.zk.ui.util.Clients;  
 import org.zkoss.zul.Window;  
 public class ZkController extends SelectorComposer<Window> {  
      private static final long serialVersionUID = 1L;  
 @Override  
 public void doAfterCompose(Window comp) throws Exception {  
      // TODO Auto-generated method stub  
      super.doAfterCompose(comp);  
      //You can change the visible app by java controller you can handle all the carousal function with this below line  
      Clients.evalJavaScript("jQuery('#mycarousel').jcarousel({ scroll: 1,visible: 3});");  
 }  
 }  

8) Project structure:

JCarousal Project structure for zk+liferay portlet

Now you can also create jCarousal dynamically from controller side by adding li element in ul element and apply the jCarousal function to ul element by its id.We will See it in next post....:D
And its done :) deploy it and there you go...GOOD DAY