|
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: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:
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.
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.
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.
Anyways, it looks awesome- thanks so much for your help and I am so glad I stumbled onto your blog!