Using jQuery’s jCarousel Lite and Thickbox in Harmony
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 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:
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.