"How to: Multiple jQuery Image Swap Galleries on the Same Page?" / ASAP

Question

I have multiple image galleries that use the following code (simply view the demo at the following link).

However, when one clicks on the thumbnails of one gallery to change the large image preview - all the galleries change automatically to that large preview as well.

In short, the question is:

"How do I seperate each gallery from each other so when the user clicks on the thumbnails of one specific gallery the large image preview of that gallery changes and not any other?"

Javascript:

$("ul.thumb li a", $(".item")).click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img", $(".item")).attr({ src: mainImage });
    return false;       
});

});

HTML:

<div class="item">
   <h2>The Money Growing Door</h2>
   <div id="main_view">
     <img src="images/1.jpg" class="uks" alt="#" />
   </div>
   <ul class="thumb">
     <li><a href="images/1.jpg"><img src="images/colours/sinine.png" alt="#" /></a></li>
     <li><a href="images/3.jpg"><img src="images/colours/must.png" alt="#" /></a></li>
     <li><a href="images/1.jpg"><img src="images/colours/valge.png" alt="#" /></a></li>
   </ul>
</div>

Basically, I repeat the same HTML and Javascript as seen in the code at: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ Only I have multiple galleries on the same page.

Answer 1

Basically, I repeat the same HTML and Javascript as seen in the code at: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ Only I have multiple galleries on the same page.

so I would think you have lots of <ul class="thumb">??

if so, then try

$("ul.thumb li a").click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $(this).closest('.item').find("#main_view img").attr({ src: mainImage });
    return false;       
});

quick demo