Request More Information

We are hiring!

Xtivia, Inc.
2013 North America Liferay Partner of the Year

Join our top-notch team of Enterprise Java and Liferay Portal professionals in our Austin, TX office or work remotely! Please check out our current Dice listings.

Recent Bloggers

Chris Shaw
Posts: 7
Stars: 0
Date: 9/17/14
Sushil Shirodkar
Posts: 1
Stars: 0
Date: 8/28/14
Luke Smith
Posts: 16
Stars: 0
Date: 8/27/14
Vamshidhar Srikantapuram
Posts: 11
Stars: 0
Date: 8/8/14
Barrie Shaw
Posts: 6
Stars: 0
Date: 8/4/14
Omar Yimaier
Posts: 4
Stars: 0
Date: 8/1/14
Bob Dietrich
Posts: 8
Stars: 0
Date: 8/1/14
Matt Wolinski
Posts: 2
Stars: 0
Date: 7/30/14
Richard Ngo
Posts: 1
Stars: 0
Date: 6/19/14
Kaushik Nagaraj
Posts: 8
Stars: 0
Date: 5/22/14
« Back

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

 

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.

 

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.

Configuration

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

Carousel

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

Comments
Anonymous User
Very nice portlet!
I would like a copy and did send an e-mail to ypur info address, but hasn't got any response. Can you please send me a copy?

Torbjörn Mattebo, Sweden
Posted on 3/8/12 1:51 PM.
Anonymous User
Nice work BUT ...

During the attempt to deply the package downloaded from Liferay's Market Place I got the below erroes and the deploy stopped:

15:10:51,102 WARN [localhost-startStop-2][FileChecker:256] Attempted to read file C:\dev\liferay\6.1.1-ce-ga2\bundles\tomcat-7.0.35\tomcat-7.0.35\bin\global-confi­guration.properties
15:10:51,113 WARN [localhost-startStop-2][FileChecker:256] Attempted to read file C:\dev\liferay\6.1.1-ce-ga2\bundles\tomcat-7.0.35\tomcat-7.0.35\bin\service.prop­erties
Posted on 2/18/13 8:15 AM in reply to Anonymous User.
Anonymous User
I downloaded a fresh Liferay 6.1.1 CE GA2 bundle and installed the Carousel portlet from the Liferay Marketplace without issues. However, the bundle from Liferay comes with Tomcat 7.0.27 and I notice that you are using a newer Tomcat 7.0.35. Can you verify if the porlet is working with an out-of-the-box Liferay bundle for you?
Posted on 2/20/13 10:00 AM in reply to Anonymous User.
Anonymous User
It is awesome!! and very useful!!

I recently installed Liferay 6.1 CE GA2 on Tomcat 7.0.35 and deployed this carousel portlet. When it is being deployed, I can see the warnings as follows.

WARN [http-apr-8081-exec-9][FileChecker:256] Attempted to read file global-configuration.properties
WARN [http-apr-8081-exec-9][FileChecker:256] Attempted to read file C:\liferay-6.1.2-CE-GA2\tomcat-7.0.35\bin\service.properties

But I think they are kind of help notice from security manager and the carousel portlet is working well without any problem.
Posted on 2/21/13 12:05 PM.
Anonymous User
Thanks for this nice portlet, working for my portal straight away from liferay marketplace.

However, does anyone knows how to set the background transparent? I have images of different geometry and I get a white background when canvas is showing. Inspected the web element and found out that there is a "background-color:rgb(255,255,255)" somewhat inlined in css style in "aui:carousel-item". But I wasn't able to find out where this style is being enforced to turn it off.

thanks for any help!
Posted on 2/21/13 1:16 PM.
Can you try putting the css in the 'Css Styles' field of the configuration screen ?
Posted on 2/21/13 1:55 PM in reply to Anonymous User.
Anonymous User
Yes it worked, thanks!

But the image stays on top of each other, so I see the largest one's margins when a smaller is shown with background tranpsparency. Guess that's why the white backgrounnd was inlined. I guess that to fix this I should have to go deeper that the css style layer ...

IMO the real issue would be to allow different image geometry.

Until then I will use my theme background color as a workaround!
Posted on 2/22/13 1:54 PM in reply to Rupa Kannan.
Katarzyna B
Hi all, did you manage to run it on Liferay 6.1.1-ce-ga2? I'm unable to do so, as I cannot define new document type (due to: http://issues.liferay.com/browse/LPS-31799?page=com.atlassian.jira.plugin.system­.issuetabpanels:comment-tabpanel). I really like Carousel's functionality and want to use it on my sites - any ideas or workarounds for this problem...?
Posted on 5/20/13 7:36 AM.
The document type called "Image" does not come from out of the box liferay . It needs to be created.

To create a new document type ,

a) Go to Documents and Media
b) Click on the down arrow near "Manage" . Choose "Document Types" from the dropdown. All the document types from Liferay are listed.
c) Click on "Add" and enter a document type name called 'Image' . Follow the instructions from the Blog on what fields need to be in the document type.(the picture on top of the page illustrates the fields on the document type)
Posted on 5/21/13 5:22 PM in reply to Katarzyna B.
Hello: I'm not allowed to call the field "alternate Text", I imagine that space. I called AlternateText and displays the slideshow but does not show the alt text
Posted on 5/31/13 7:42 AM in reply to Rupa Kannan.
Could you be more specific about what the issue is when say you are not allowed to call the field "alternateText"?
Posted on 5/31/13 1:45 PM in reply to Rafa Pina.
When you call the field "Alternate Text" told me that the XML was incorrect. I figured it was blank and I call "AlternateText"
Posted on 6/3/13 1:41 AM in reply to Rupa Kannan.
zahia ikh
I get an error when deploying portlet on tomcat 7.0.27. Help please.

Caused by: java.lang.SecurityException: Attempted to access declared members
at com.liferay.portal.security.pacl.checker.BaseChecker.throwSecurityException(Base­Checker.java:259)
at com.liferay.portal.security.pacl.checker.RuntimeChecker.checkPermission(RuntimeC­hecker.java:71)
at com.liferay.portal.security.pacl.ActivePACLPolicy.checkPermission(ActivePACLPoli­cy.java:55)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:103)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:74)
at java.lang.SecurityManager.checkMemberAccess(SecurityManager.java:1662)
at java.lang.Class.checkMemberAccess(Class.java:2157)
at java.lang.Class.getDeclaredFields(Class.java:1742)
at org.apache.catalina.core.DefaultInstanceManager.populateAnnotationsCache(Default­InstanceManager.java:276)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManag­er.java:143)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManag­er.java:137)
at org.apache.jasper.runtime.TagHandlerPool.get(TagHandlerPool.java:121)
at org.apache.jsp.html.carousel.view_jsp._jspService(view_jsp.java:110)
... 186 more
5 juin 2013 09:06:02 org.apache.catalina.core.ApplicationDispatcher invoke
GRAVE: "Servlet.service()" pour la servlet carouselportlet Servlet a lancé une exception
java.lang.SecurityException: Attempted to access declared members
at com.liferay.portal.security.pacl.checker.BaseChecker.throwSecurityException(Base­Checker.java:259)
at com.liferay.portal.security.pacl.checker.RuntimeChecker.checkPermission(RuntimeC­hecker.java:71)
at com.liferay.portal.security.pacl.ActivePACLPolicy.checkPermission(ActivePACLPoli­cy.java:55)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:103)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:74)
at java.lang.SecurityManager.checkMemberAccess(SecurityManager.java:1662)
at java.lang.Class.checkMemberAccess(Class.java:2157)
at java.lang.Class.getDeclaredFields(Class.java:1742)
Posted on 6/5/13 4:44 AM.
Did u create the 'Image' document type as per the blog and called the field name "alternateText"? Looks like there is a mismatch in the name !
Posted on 6/5/13 2:30 PM in reply to Rafa Pina.
I think the name can not contain blanks. What should be exactly the field name?. "AlternateText" is not correct?
Posted on 6/6/13 2:08 AM in reply to Rupa Kannan.
zahia ikh
I try again with the creation of the type and image, but I still have the same problem! I think it is related to the security manager, is there a parameter setting to the security manager?
Error in jsp JSP page /html/carousel/init.jspf

Caused by: org.apache.jasper.JasperException: An exception occurred processing JSP page /html/carousel/init.jspf at line 31

28:
29: <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/carousel.css" media="screen"/>
30:
31: <liferay-theme:defineObjects />
32:
33: <portlet:defineObjects/>
34:


Stacktrace:
at org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper­.java:568)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:455)
­at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:390)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilt­erChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.­java:210)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(In­vokerFilterChain.java:72)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilterChain.doFilter(In­vokerFilterChain.java:116)
at com.liferay.portal.kernel.servlet.filters.invoker.InvokerFilter.doFilter(Invoker­Filter.java:73)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilt­erChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.­java:210)
at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java­:684)
at org.apache.catalina.core.ApplicationDispatcher.doInclude(ApplicationDispatcher.j­ava:593)
at org.apache.catalina.core.ApplicationDispatcher.include(ApplicationDispatcher.jav­a:530)
at com.liferay.portlet.PortletRequestDispatcherImpl.dispatch(PortletRequestDispatch­erImpl.java:323)
at com.liferay.portlet.PortletRequestDispatcherImpl.include(PortletRequestDispatche­rImpl.java:105)
... 172 more
Caused by: javax.servlet.ServletException: javax.servlet.jsp.JspException: Attempted to access declared members
at org.apache.jasper.runtime.PageContextImpl.doHandlePageException(PageContextImpl.­java:907)
at org.apache.jasper.runtime.PageContextImpl.handlePageException(PageContextImpl.ja­va:840)
at com.liferay.portal.kernel.servlet.PageContextWrapper.handlePageException(PageCon­textWrapper.java:161)
at org.apache.jsp.html.carousel.edit_jsp._jspService(edit_jsp.java:550)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:432)
­... 187 more
Caused by: java.lang.SecurityException: Attempted to access declared members
at com.liferay.portal.security.pacl.checker.BaseChecker.throwSecurityException(Base­Checker.java:259)
at com.liferay.portal.security.pacl.checker.RuntimeChecker.checkPermission(RuntimeC­hecker.java:71)
at com.liferay.portal.security.pacl.ActivePACLPolicy.checkPermission(ActivePACLPoli­cy.java:55)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:103)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:74)
at java.lang.SecurityManager.checkMemberAccess(SecurityManager.java:1662)
at java.lang.Class.checkMemberAccess(Class.java:2157)
at java.lang.Class.getDeclaredFields(Class.java:1742)
at org.apache.catalina.core.DefaultInstanceManager.populateAnnotationsCache(Default­InstanceManager.java:276)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManag­er.java:143)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManag­er.java:137)
at org.apache.jasper.runtime.TagHandlerPool.get(TagHandlerPool.java:121)
at org.apache.jsp.html.carousel.edit_jsp._jspService(edit_jsp.java:128)
... 190 more
16:14:40,809 ERROR [http-bio-8080-exec-18][render_portlet_jsp:154] java.lang.SecurityException: Attempted to access declared members
at com.liferay.portal.security.pacl.checker.BaseChecker.throwSecurityException(Base­Checker.java:259)
at com.liferay.portal.security.pacl.checker.RuntimeChecker.checkPermission(RuntimeC­hecker.java:71)
at com.liferay.portal.security.pacl.ActivePACLPolicy.checkPermission(ActivePACLPoli­cy.java:55)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:103)
at com.liferay.portal.security.lang.PortalSecurityManager.checkPermission(PortalSec­urityManager.java:74)
at java.lang.SecurityManager.checkMemberAccess(SecurityManager.java:1662)
at java.lang.Class.checkMemberAccess(Class.java:2157)
at java.lang.Class.getDeclaredFields(Class.java:1742)
at org.apache.catalina.core.DefaultInstanceManager.populateAnnotationsCache(Default­InstanceManager.java:276)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManag­er.java:143)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManag­er.java:137)
at org.apache.jasper.runtime.TagHandlerPool.get(TagHandlerPool.java:121)
at org.apache.jsp.html.carousel.edit_jsp._jspService(edit_jsp.java:128)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:432)
­at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:390)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilt­erChain.java:305)
Posted on 6/7/13 9:47 AM in reply to Rupa Kannan.
Llies Meridja
Hello,

Nice portlet, is there any chance of getting the source code for it?

Thanks
Posted on 6/20/13 4:50 AM.
Sanjay Datta
Hi , I tried deploying this portlet with Liferay 6.1 and JBOSS EAP 6.

I do not see the custom META DATA fields... what am i missing ?
Posted on 7/9/13 1:30 PM.
Did you create the custom document type ? The document type 'Image' does not come with the Out of the Box Liferay. This link has instructions on how to create the document type http://www.liferay.com/documentation/liferay-portal/6.1/user-guide/-/ai/document­-types-and-metadata-sets.
Posted on 7/9/13 1:45 PM in reply to Sanjay Datta.
Is it possible to disable the "player bar"?

Thanks,
Pablo Serra, Argentina
Posted on 7/17/13 4:10 PM.
Showing 1 - 20 of 29 results.
of 2

Request More Information