Carousel Portlet

Most of us would have seen the carousel on Liferay’s home page (http://www.liferay.com/). The Carousel widget is a continuous, circular navigation of a collection of items (divs or images).

In this blog, I am going to talk about a carousel portlet that was developed by me (Xtivia) using Spring Portlet MVC framework and Alloy UI. The goal of this portlet is to make it easy on a content manager or a site administrator to add carousels to a site without writing JavaScript code. The XTIVIA carousel portlet allows you (as the configurator) to configure a tag name associated with the images that you want to render in the carousel; using this portlet you can have multiple carousels throughout your site.

Preferences

The Carousel portlet can be configured through the Preferences mode of the portlet. The Preferences mode has a configuration screen where the following features are specified by the user:

  • Height & Width
  • Pause Interval
  • Css Style
  • Tag name

The height and width of the portlet is specified in pixels, and should match the size of the images that you want to render in the carousel. Pause Interval is the time interval between any two images in seconds. Css Style is used to change the default css style definitions. For instance, if the user does not want to display some of the buttons like the previous button or the next button, he/she can enter the css such that the buttons are not displayed. The carousel pulls all the images tagged with the names specified in the ‘Tag Name’ selector.

Getting Started

1. Create a Document Type

Create a document type called ‘Image’ in the Liferay “documents and media” portlet . The document type has the following  meta data fields.

 Field Label  Field Name  Type
 Sequence  sequence  Textbox
 Link  link  Textbox
 Alternate Text  alternateText  Textbox

 

document_type

2. Create an image

Enter the values for the fields created as a part of the ‘Image’ document type.  The image to be displayed is uploaded through the File Uploader.  Sequence denotes the sequence in which the images are to be rendered in the carousel.  Link specifies the target link to be used when the image is clicked. Alternate Text is the text that is displayed when user hovers over a carousel image.

create_image

3. Preferences mode

Go to the ‘Preferences’ mode of the portlet.  Enter all the configuration details and the tag name to be used by the carousel to display the images.

preference_mode

The carousel now slides through all the images tagged with the name selected in the configuration screen .

Liferay

For more information about this portlet or to obtain a copy of it (free of charge), contact us at info@xtivia.com.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Comment