multiple javascript driven image Galleries on one page
<p>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.</p>

<p>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... <a href="http://www.chartoonz.com/portfolio/illustration.html" rel="nofollow">http://www.chartoonz.com/portfolio/illustration.html</a>) As you can see the basic functionality works.</p>

<p>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?</p>

<p>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.</p>

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

<pre><code>// 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('&lt;img src="'+photo_preview+'"/&gt;');
$('.gallery_preload_area img').imgpreload(function(){

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

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

$('.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('&lt;img src="'+first_photo_preview+'"/&gt;');
$('.gallery_preload_area img').imgpreload(function(){

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

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

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

setFancyboxLinks();
updateThumbnails();

});

});
</code></pre>
