Using jQuery’s jCarousel Lite and Thickbox in Harmony

July 7th, 2010 - Posted by Steve Marks to Javascript / jQuery, Web Development.

Using jCarousel Lite and Thickbox Together

There are two jQuery plugins that I probably use more than any others. These are jCarousel Lite by Ganeshji Marwaha and Thickbox by Cody Lindley.

jCarousel Lite – This plugin allows you to navigate images and/or HTML in a carousel-style widget.

Thickbox – Designed to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

You do run into a problem however when you need to use both at the same time. Imagine you have a carousel of images that when clicked, you want to open in a Thickbox. This will work for the items initially in view when the page loads but as soon as you scroll left or right on the carousel, the newly visible images/HTML will not be linked to the Thickbox and will simply open up in full view.

The Solution
The problem here is that the Thickbox is initialized upon the page loading and associates itself with any links that have a class of ‘thickbox’. When jCarousel Lite does it’s magic, it’s essentially duplicating elements, that of which do not have a link with the Thickbox.

To get round this issue we need to tell Thickbox to re-look at what it should be looking for by using the jCarousel Lite option ‘afterEnd’. This allows us to perform an action everytime any activity occurs such as scrolling left or right.

See the example below on how best to achieve this:

<script type="text/javascript">
    $(document).ready(function() {
            visible: 3,
            afterEnd: function(a) {
                tb_init('a.thickbox, area.thickbox, input.thickbox');

Notice how we’re calling Thickboxes tb_init() function after every animation? This is the same function that is called by the Thickbox plugin when the page loads and allows us to re-assign all the elements on the page, including the ones that come into view as a result of scrolling the carousel.

This entry was posted on Wednesday, July 7th, 2010 at 10:06 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first