Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

CQ5.6.1 component carousel using twitter bootstrap

Avatar

Former Community Member

I am using CQ5.6.1.  I have a component which contains other components (images with text) that I want to show as a carousel in the CQ WCM view for content editing.  However, I also want to be able to double click on the inner image components to edit them. 

I am able to get the carousel working on the page.  It slides and displays correctly. However, the inner image components do not always highlight and open for editing properly.  Usually, I am not able to hover and double click on them at all.

I am using the Twitter bootstrap carousel (http://getbootstrap.com/2.3.2/javascript.html#carousel) in my component jsp.  I loop through the inner components, get their path, and insert them into the carousel code using <cq:include /> .

Any ideas on how to get the edit rollover to work properly?

1 Accepted Solution

Avatar

Correct answer by
Level 10

I personally have not used this specific JQuery plugin (Twitter bootstrap carousel component). However -- I have used another JQuery plugin to create a custom carousel (that uses images and text) and hooked it into a CQ dialog so a CQ author can edit its properties during design time. See:

http://scottsdigitalcommunity.blogspot.ca/2013/09/creating-custom-carousel-component-for.html

http://scottsdigitalcommunity.blogspot.ca/2013/09/integrating-cq-custom-map-component.html

In this use case, the carousel component displays images from the CQ DAM and the text can be set via a CQ dialog (2nd link). So an author can double click on the component during design time and a CQ dialog appears. You can use this approach (ie - using a dialog) to set the properties that your carousel component requires. 

 

HTH

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

I personally have not used this specific JQuery plugin (Twitter bootstrap carousel component). However -- I have used another JQuery plugin to create a custom carousel (that uses images and text) and hooked it into a CQ dialog so a CQ author can edit its properties during design time. See:

http://scottsdigitalcommunity.blogspot.ca/2013/09/creating-custom-carousel-component-for.html

http://scottsdigitalcommunity.blogspot.ca/2013/09/integrating-cq-custom-map-component.html

In this use case, the carousel component displays images from the CQ DAM and the text can be set via a CQ dialog (2nd link). So an author can double click on the component during design time and a CQ dialog appears. You can use this approach (ie - using a dialog) to set the properties that your carousel component requires. 

 

HTH