Shaun Mccran

My digital playground

15
M
A
R
2010

Using other plug-ins with the JQuery Carousel Plug-in and event issues

This entry examines how the JQuery Carousel object interacts with other Plug-ins, and how to combine those plug-ins with the Carousel functionality. I also cover an issue where the jCarousel plug-in does not apply functionality to non visible elements when the page loads.

I have been using two different JQuery Carousel plugins for a while now. The slightly older jCarousel ( http://sorgalla.com/jcarousel/) and the jCarousellite plug-in ( http://www.gmarwaha.com/jquery/jcarousellite/ ). Both work well, and both allow you to scroll through content in 'Rich' manner.

The problem

What I also want to combine with these is a lightbox ( FancyBox ). A user scrolls through the Carousel and clicks on one of the items, the item click invokes the lightbox script and the lightbox 'pops up'. This works for the items that are actually on display when the page loads. For all the other items it does not work. Clicking them simply takes you to their URL, and does not invoke the lighbox.

Debugging

It appears that the Carousel code that hides the off screen elements also causes them to be skipped in the DOM when the lighbox is applied. When you view their source they appear to have the right class, but they simply don't work.

The solution

Moving the position of the call to the lightbox will fix this. Usually you specify that a JQuery function loads when the document is ready, like this:

view plain print about
1<s/cript type="text/javascript">
2$(document).ready(function(){
3//my function code goes here
4});
5</script>

Instead we have to move our lightbox code to a position where it will be triggered on each Carousel movement. In that way the JQuery is applied to each newly visible element.

The code looks something like this:

view plain print about
1<s/cript type="text/javascript">
2
3// build an Array of data for the carousel
4var mycarousel_itemList = [
5 {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
6 {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower2"},
7 {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower3"}
8];
9
10// run as each item loads
11function mycarousel_itemLoadCallback(carousel, state)
12{
13 for (var i = carousel.first; i <= carousel.last; i++) {
14 if (carousel.has(i)) {
15 continue;
16 }
17
18 if (i >
mycarousel_itemList.length) {
19 break;
20 }
21
22 // Create an object from HTML
23 var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
24
25        // this runs whenever an item comes into focus
26        alert(i);
27
28// this adds all the newly formed elements to the div
29carousel.add(i, item);
30
31// apply our lightbox effect to each of the new elements
32$("a.iframe").fancybox({
33        'speedIn'        :    600,
34        'speedOut'        :    200,
35        'overlayShow'    :    true});
36
37 }
38};
39
40/**
41 * Item html creation helper.
42 */

43function mycarousel_getItemHTML(item)
44{
45 var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
46 return '<a href="' + url_m + '" title="' + item.title + '" class="iframe"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
47};
48
49// apply the carousel script to the correct div
50jQuery(document).ready(function() {
51 jQuery('#mycarousel').jcarousel({
52 size: mycarousel_itemList.length,
53 itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
54 });
55});
56
57</script>

By positioning the lightbox code inside the call back function it is applied to each element as they gain visibility.

An demo of this is here.

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Lark's Gravatar Thanks so much for this! I haven't gotten the chance to try out jCarousel yet, but I was wondering if this fix for Fancybox would cause any conflicts if multiple slideshows were used on the same page?
# Posted By Lark | 24/03/2010 01:43
Shaun McCran's Gravatar Hi,
Thanks for the comments.

To answer your question, this works for as many carousel instances as you want, I've had this working with three differently styled JCarousels, two passing the same content type (image content), and the third passing iframe content.

Fancybox will auto detect the content supplied to the 'lightbox', or you can set the 'type' (Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline'), so you could set different types per JCarousel.

I guess if you wanted different handling on different JCarousels you could recreate the 'mycarousel_itemLoadCallback' function with logic to determine which class ('#mycarousel') it was being used on.
# Posted By Shaun McCran | 24/03/2010 08:40
Lark's Gravatar Hi Shaun,

Thanks for your response. I have built one slideshow now, and its functioning beautifully with Fancybox. But I guess I am confused as to how to separate the multiple slideshows in the javascript. It looks very easy when you are using HTML markup where you can use multiple classes. But with all the images generated by the variable "mycarousel_itemList," would I create multiple variables for each slideshow?

Sorry, I am pretty new to Javascript and still learning. Thanks for your help.
# Posted By Lark | 25/03/2010 16:18
Lark's Gravatar I just created a new variable and duplicated the code using the new variable and it works great. But I suppose is there a more graceful way to write this?

Anyways, it looks awesome- thanks so much for your help and I am so glad I stumbled onto your blog!
# Posted By Lark | 25/03/2010 16:54
Rebecca's Gravatar where do I put this?

Im not sure what the callback is does this go in the html or in the downloaded .js file?
# Posted By Rebecca | 22/11/2010 02:42
Shaun's Gravatar Hi Rebecca, the callback goes in the html, the .js file is more like a plugin. Do you have an example of what you are trying to do?
# Posted By Shaun | 22/11/2010 10:41
Mike's Gravatar Hey Shaun, great post! I was just wondering how I can load a separate thumbnail image (smaller file size) that clicks to display a large image.

and also, if I link a video, how can I display a thumbnail.

Any help would be greatly appreciated!
Mike
# Posted By Mike | 08/11/2011 19:57
catherine's Gravatar thanks a lot for your job, unfortunately for me it's not working.
It will be very very great if you can help me.
I'm trying for 3 days!!!
the site : ww.katsign.com/malbrel1 and you can see another test katsign.com/malbrel

THANKS
# Posted By catherine | 23/11/2011 10:01
Back to top