Monday, November 15, 2010

Integrating Coin Slider with Liferay with zero development

In this blog, I will show you how to integrate the Coin Slider library in a Liferay portlet without having to develop any portlet. Coin Slider is a jQuery based image slider with many effects for image transition.

Note: This solution is based on Liferay 6.0.5

Download and extract the latest version of the Coin Slider library from http://workshop.rs/projects/coin-slider/

Create a folder slideshow in the document library of the community where you want to use the slider. Add the files coin-slider-min.js, coin-slider-styles.css, jquery-1.4.2.min.js to the slideshow folder. Create a new file javascript.js file in filesystem. Add the following code to this file:

$(document).ready(function() {
    $("#coin-slider").coinslider({ hoverPause: false });
});
 

Upload the javascript.js file to the slideshow document library. The slideshow folder should now look like this:

Next upload few images that you want to display in the slider in the Image Gallery.

There are 3 images in the image gallery above.

Now create a new web content structure. Name it coin-slideshow. Add xml schema definition to the structure as shown below:
Click Save when done.

Create a new web content template and name it coin-slideshow-template. Select coin-slideshow as the structure for the new template. Click the Launch Editor button. In the dialog that appears, paste the following code:


<link href="$css.getData()" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="$jquery.getData()"></script>
<script type="text/javascript" src="$coinjs.getData()"></script>
<script type="text/javascript" src="$slidestart.getData()"></script>

<div id="coin-slider">
#foreach ($item in $slide.getSiblings())
   #foreach ( $itemData in $item.getChildren() )
        #if ( "$itemData.getName()" == "href" )
          #set ( $href = $itemData.getData() )
        #elseif ( "$itemData.getName()" == "img_src" )
          #set ( $img_src = $itemData.getData() )
        #elseif ( "$itemData.getName()" == "description" )
          #set ( $description = $itemData.getData() )
        #end
    #end
    <a href="$href"><br />
        <img src="$img_src" />
        <span>$description</span>
    </a>
#end
</div>



Click Update button when done. Click Save again in the main dialog.

Now is the time to add the slider in our page. Add Web Content Display portlet to the page where you want the slider. Click the Add Web Content link in the portlet to create content for the portlet. In the new dialog box, give a name to the content, say Slideshow. Change the structure of the web content by clicking the Choose button under the Structure section on the right. Select the structure coin-slideshow that we created earlier. This will automatically choose the template that we associated with the structure. Instead of the HTML editor, a web form with fields are shown.

In the css field, choose the coin-slider-styles.css from the document library. Similarly, choose jquery-1.4.2.min.js for jquery field, coin-slider-min.js for coinjs field and javascript.js for coinstart field. For the first slide, name it slide1. Select a image from the Image Gallery for the img_src field. Select target location when an image is clicked from the dropdown list for the href field. Type some text to be displayed for the image in the description field. Similarly, add more slides for each image that you want to be displayed.


Click Publish button to save the content and make it viewable.

20 comments:

  1. Java may be the main choice for enterprise development now, but it’s days are numbered as the only stalwart option to go with.

    Let’s face it, many of these so called “enterprise applications” could easily have been written much faster and with less overhead using technologies like Python, PHP, et al.






    OpenCL Training

    ReplyDelete
  2. That's an interesting solution. I need something like this and was going to bake the jquery includes into the theme, but this is more elegant. I don't often use templates and structures, but this is an interesting application of them. Thanks.

    ReplyDelete
  3. @J Toman
    Glad to know that this blog was useful. Liferay's default features can be used for bulk of our requirements without resorting to custom development.

    ReplyDelete
  4. @Jazzie Casas
    You might be right in a particular context. But Java is not just the language and runtime anymore. It is the entire ecosystem: language, runtime, community, people, open source projects, corporate, blogs, forums, books, magazines, groups and countless others, that matters.

    ReplyDelete
  5. @Jazzie Casas
    We have been hearing this for many years. Same as Windows finally killing Unix. But in reality, what do we have? Liferay (Java) is the only such opensource product in the Gartner Group quadrants. Alfresco and Nuxeo are the leading opensource ECM products, both Java. On the Unix front, we have Mac OS killing windows in user friendliness ...

    In practice, with PHP products you start out fast and then bog down. With Java based system, it is the other way around, you start out slow and pick up pace as you develop expertise. So, at the end of day, it just depends on your level of expertise and commitment. Are you a pro at heart, or a hobbyist ...

    ReplyDelete
  6. I tried this is Liferay 5.2, and it worked, with one problem: Once the slideshow started running, I could no longer drag and drop portlets around on the page. I think this might be because of a conflict between the version of jquery built into liferay and the version required to run the slideshow. Does that sound likely?

    We are upgrading to 6, but not for a while.

    ReplyDelete
  7. @Anonymous
    It might be a possibility. Why don't you use the 5.2's version of jquery and check if the problem is resolved.

    ReplyDelete
  8. i have try coin slider on liferay 6.x and it works.But problem happen, when i zoom in or zoom out the browser the image on slider resize automatically but border on slider doesn't.
    How to solve them ?

    ReplyDelete
  9. Thanks, very good solution. I have just made it work on Liferay 6.0.6.

    Just a small customization on your procedure: I cleant 'coin-slider-styles.css' file and moved its content to 'custom.css' file of my Liferay template. In that way, I keep centralized control of the styles in my site from 'custom.css', also for the slideshow.

    So far, zero problems.

    Thanks Sajux

    ReplyDelete
  10. Hello, I followed all the steps, but did not run!
    I'm using Liferay 6. Tested by replacing the most current jquery1.4.2 jquery1.6.2, but did not work.
    All images are displayed at once under each statically ... the transition effects of jquery and css are not executed.

    Congratulate and thank the availability to help!

    :)
    Jaci

    ReplyDelete
  11. hi...i am unable to run this on liferay 6....i followed all the steps but dint succeed...can anyone help me out in finding what went wrong...??
    tthnx !!

    ReplyDelete
  12. Hello, I followed your instructions and was successful; thank you very much for your assistance. I have one issue, when I return to edit content in the portlet (make changes to text in the links) and re-publish; all data is lost and i receive an error. Has anyone experienced this? I am using liferay 6.0.5 EE.

    ReplyDelete
  13. Hi, thanks for share this way but i've a problem. This just show the first image and thats all. I don't know what im doing wrong. Can u help me?.

    I really appreciate ur attention

    ReplyDelete
    Replies
    1. You have to add more slides, one for each image you want to display (the above example only shows adding the first image).

      Delete
  14. I tried using the same procedure as mentioned above but i am not getting the output. As mentioned above.

    ReplyDelete
  15. Worked great for me in Lifreray 6.2. Only question is which file to edit to adjust the options? Need it to display 940. Edited lines 472 and 473 of coin-slider.js but output remains unchanged.

    ReplyDelete
  16. is it possible that this inherits some default values from a javascript library somewhere? despite changing the values for options in coin-slider.min.js display defaults to original values. very frustrating. any help would be much appreciated!

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. Hi Dear ,
    I See Your Blog Daily..Your Blog Is Very Usefull For Me .I Like SO Much


    You Can Also See..

    Slider Maker is the easiest tool to generate jQuery Photo Slideshows - Upload jquery slideshow maker on your web server and start building your first web slideshows.

    Visit Now - http://www.slider-maker.com/

    ReplyDelete