multiple javascript driven image Galleries on one page

Question

I did a jquery tutorial from lynda.com to set up a java driven (css formatted) image gallery with neat effects and light box. It works fine.

I now want to create several galleries one one page and have each one only able to display the images associated with it. The problem is because the tags/IDs are all the same every gallery displays the same image. (for an example of the problem, please see... http://www.chartoonz.com/portfolio/illustration.html) As you can see the basic functionality works.

How can I get the java script to restrict functionality of one gallery to that gallery and leave the others alone? I thought, since the the jquery is doing the $(document).ready that it would happen at render time and so if I could loop it it would only do one gallery at a time, but that only accounts for the onload preview image. How can I seperate the galleries so that they don't all do the same thing no matter which thumbnail image is pressed? Can I?

As I said I thought I could loop it but I am having trouble with that! I tried taking all gallery_content tags into an array and then looping through the array, but I am clearly not doing that right as it didn't work.

I hope I have clearly articulated the problem. Any help would be appreciated. Here is my pertinent javascript...

// What to do when the document is ready
$(document).ready(function(){


// Capture the thumbnail links

$('.gallery_thumbnails a').click(function(e){



// Disable standard link behavior

e.preventDefault();


// Fade out thumbnails
// Commented out to be in their own function (/**/)
/*
$('.gallery_thumbnails a').removeClass('selected');
$('.gallery_thumbnails a').children().css('opacity', '1');
$(this).addClass('selected');
$(this).children().css('opacity', '.4');
*/

// Add variables to link thumbnail to preview
var photo_caption = $(this).attr('title');
var photo_fullsize = $(this).attr('href');
var photo_preview = photo_fullsize.replace('_fullsize', '_preview');


$('.gallery_caption').slideUp(500);
$('.gallery_preview').fadeOut(500, function(){

// preload
$('.gallery_preload_area').html('<img src="'+photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){

// Write the HTML into the page
$('.gallery_preview').html('<a class="overlaylink" href="'+photo_fullsize+'"       
title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');

// Update the html for the gallery caption
$('.gallery_caption').html('<p><a class="overlaylink zoom" href="'+photo_fullsize+'"     
title="'+photo_caption+'">View larger</a></p><p>'+photo_caption+'</p>')

$('.gallery_preview').fadeIn(500);
$('.gallery_caption').slideDown(500);

setFancyboxLinks();
updateThumbnails();

});

});

}

// Initialize the gallery on load
var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
var first_photo_fullsize =$('.gallery_thumbnails a').first().attr('href');
var first_photo_preview = first_photo_fullsize.replace('_fullsize', '_preview');

$('.gallery_caption').slideUp(500);
$('.gallery_preview').fadeOut(500, function(){

// preload
$('.gallery_preload_area').html('<img src="'+first_photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){

// Write the HTML into the page
$('.gallery_preview').html('<a class="overlaylink" href="'+first_photo_fullsize+'" title= 
"'+first_photo_caption+'" style="background-image:url('+first_photo_preview+');"></a>');

// Update the html for the gallery caption
$('.gallery_caption').html('<p><a class="overlaylink zoom" href="'+first_photo_fullsize+'" 
title="'+first_photo_caption+'">View larger</a></p><p>'+first_photo_caption+'</p>')

$('.gallery_preview').fadeIn(500);
$('.gallery_caption').slideDown(500);

setFancyboxLinks();
updateThumbnails();

});

});

Answer 1

If you use more ids in your jQuery selectors, you can be more specific about the elements you are targeting and your code will run faster in most browsers :-)

try adding an id to each "galleryBodyWrapper" div like this:

div class="galleryBodyWrapper" id="gallery1">...

then you can write seperate selectors for each of your galleries like this:

$('#gallery1 .gallery_thumbnails').click(function(e){...

Of course, you will have to write out the code once for each gallery you are using. a neater way to do it would be to package the gallery code as an reusable object and pass the jQuery selectors into its constructor.

  chartoonz.ui.initGalleries('div.galleryBodyWrapper');

The init method would look something like this:

    /**
     * Create a gallery object for each div on this page that matches the selector
     *
     * @return void
     */
    initGalleries:function(selector){
        chartoonz.$(selector).each(
            function(intIndex,domEle){
                var galleryDiv = chartoonz.$(domEle);
                chartoonz.ui.galleries[intIndex] = new chartoonz.ui.gallery(galleryDiv);
            });


},

so you could refactor your original code like this (I have briefly tested it, and it seems to work with your HTML)

//Set up a page namespace
chartoonz = {};
//localise the jQuery object to prevent conflicts
chartoonz.$ = jQuery;

/**
 * Object to contain page UI elements and interactions
 *
 */
chartoonz.ui={
    /**
     * Container for all chartoonz.ui.gallery objects on this page.
     * @var Array 
     */
    galleries:[],


    /**
     * Create a gallery object for each div on this page that matches the selector
     *
     * @return void
     */
    initGalleries:function(selector){

        chartoonz.$(selector).each(
                                   function(intIndex,domEle){
                                       var galleryDiv = chartoonz.$(domEle);
                                       chartoonz.ui.galleries[intIndex] = new chartoonz.ui.gallery(galleryDiv);
                                   });

    },


    /**
     * The gallery object
     */
    gallery:function(context){
        /**
         * container for all of the thumbnails in this gallery
         * @var Array
         */
        this.thumbnails = [];
        /**
         * The caption div for this gallery.
         * @var jQuery
         */
        this.captionEle = chartoonz.$('.gallery_caption',context);
        /**
         * The preview div for this gallery.
         * @var jQuery
         */
        this.previewEle = chartoonz.$('.gallery_preview',context);
        /**
         * The pre-load div for this gallery.
         * @var jQuery
         */
        this.preloadEle = chartoonz.$('.gallery_preload_area',context);
        /**
         * The pre-load image for this gallery.
         * @var jQuery
         */
        this.preloadEleImg = chartoonz.$('img',this.preloadEle);

        //initialise the thumbnails
        var parentGallery = this;
        chartoonz.$('a',context).each(
                                      function(intIndex,domEle){
                                          var obj = chartoonz.$(domEle);

                                          obj.click(function(e){
                                                    // Disable standard link behavior
                                                    e.preventDefault();

                                                    // Add variables to link thumbnail to preview
                                                    var photo_caption = obj.attr('title');
                                                    var photo_fullsize = obj.attr('href');
                                                    var photo_preview = photo_fullsize.replace('_fullsize', '_preview');

                                                    parentGallery.setMain(photo_caption,photo_fullsize,photo_preview);

                                                    });
                                          parentGallery.thumbnails[intIndex] = obj; 

                                      });

        /**
         * Update the html for the  gallery caption
         *
         * @return void
         */
        this.setCaption = function(photo_caption,photo_fullsize){

            this.captionEle.html('<p><a class="overlaylink zoom" href="'+photo_fullsize+'" title="'+photo_caption+'">View larger</a></p><p>'+photo_caption+'</p>')

        }


        /**
         * Set the  html for the preview
         *
         * @return void
         */
        this.setPreview = function(photo_caption,photo_fullsize,photo_preview){

            this.previewEle.html('<a class="overlaylink" href="'+photo_fullsize+'" title= "'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');  

        }


        /**
         * Set the  main image
         *
         * @return void
         */
        this.setMain = function(photo_caption,photo_fullsize,photo_preview){

            this.captionEle.slideUp(500);
            var parentGallery = this;
            this.previewEle.fadeOut(500, function(){

                                    // preload
                                    parentGallery.preloadEle.html('<img src="'+photo_preview+'"/>');
                                    parentGallery.preloadEleImg.imgpreload(function(){

                                                                           parentGallery.setPreview(photo_caption,photo_fullsize,photo_preview);
                                                                           parentGallery.setCaption(photo_caption,photo_fullsize);

                                                                           parentGallery.previewEle.fadeIn(500);
                                                                           parentGallery.captionEle.slideDown(500);

                                                                           setFancyboxLinks();
                                                                           updateThumbnails();


                                                                           });




                                    });

        }

        //  Initialize the gallery on load
        var first_photo_caption = this.thumbnails[0].attr('title');
        var first_photo_fullsize =this.thumbnails[0].attr('href');
        var first_photo_preview = first_photo_fullsize.replace('_fullsize', '_preview');
        this.setMain(first_photo_caption,first_photo_fullsize,first_photo_preview);   

    }


};


$(document).ready(function(){
                  // Navigation Menu
                  navWrapper();
                  //footerText();
                  followLogos();
                  calculateDate();

                  //This line sets up the galleries
                  chartoonz.ui.initGalleries('div.galleryBodyWrapper');

                  });


// Functions... Your other functions go here as before.

Hope that helps

_Pez