CQ5.6.1 component carousel using twitter bootstrap

[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?

[smacdonald2008 · Accepted solution]

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