Multiple image swap galleries

Hey Guys,
I found a neat little jQuery snippet (view website here) that swaps thumbnails with the main image. This would be perfect for what I am trying to do however, I will be having more than 1 gallery on the same page - so the problem I am experiencing is the main image is swapping out on every gallery. Is there anyone who could show me what I would need to change to make this work with multiple galleries instances?
Thanks!

Hi,

The problem is that jQuery is referencing the large image (the one that will be swapped out) using an id.
As you may not have more than one element on a page with the same id, this is very probably why you’re seeing the behaviour you’re seeing.
What you need to do is change the id to a class.
If you would like a hand implementing this, just post a link to a page where I can see the problem and I’ll take a look for you.

Hi Dave, I tried changing the ID’s to classes but it didn’t make any difference… here is the link to the page I am working on … thanks!

Hi there,

The problem is that all of your large images have the id of “largeImg”.
This is a) invalid HTML and b) this will confuse jQuery.

I have altered your script a little to get around this.
What I have done is given the articles that enclose your galleries a class of “gallery”, then I have selected these articles and using event delegation bound the click event to the thumbnails.
The advantage of this approach is that using e.delegateTarget we can get a reference to the article containing the thumbnail you click on, then use that to get a reference to the image that should be altered.

Here’s a demo.

Here’s the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="http://onetribetattoo.com/" />
    <meta charset="utf-8">
    <title> - One Tribe Custom Filipino Tattoos</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/unsemantic-grid-responsive-tablet-no-ie7.css">
    <link rel="stylesheet" href="../css/layout-responsive.css">
  </head>
  <body id="merchandise">
    <div id="wrapper">
      <main class="grid-container gutter-top" role="main"> 
        <div class="grid-75 tablet-grid-65 mobile-grid-100" id="mainContent">
          <div class="inner">
            <article class="gallery">
              <div class="merchImg">
                <div class="mainImg"> 
                  <img src="merchandise/images/one-tribe-painted-ones-1.jpg" alt="" class="imgBorder">
                  <div class="overlay"></div>
                </div>
              </div>
              <div class="thumbs"> 
                <a href="merchandise/images/one-tribe-painted-ones-1.jpg" class="thumbnail"><img src="merchandise/images/one-tribe-painted-ones-t1.jpg" class="imgBorder"></a>
                <a href="merchandise/images/one-tribe-painted-ones-2.jpg" class="thumbnail"><img src="merchandise/images/one-tribe-painted-ones-t2.jpg" class="imgBorder"></a>
                <a href="merchandise/images/one-tribe-painted-ones-3.jpg" class="thumbnail"><img src="merchandise/images/one-tribe-painted-ones-t3.jpg" class="imgBorder"></a>
              </div>
            </article>
              
            <div class="dividerTribal"></div>
            
            <article class="gallery">
              <div class="merchImg">
                <div class="mainImg"> 
                  <img src="merchandise/images/test1.jpg" alt="" class="imgBorder">
                  <div class="overlay"></div>
                </div>
              </div>
              <div class="thumbs"> 
                <a href="merchandise/images/test1.jpg" class="thumbnail"><img src="merchandise/images/test-t1.jpg" class="imgBorder"></a>
                <a href="merchandise/images/test2.jpg" class="thumbnail"><img src="merchandise/images/test-t2.jpg" class="imgBorder"></a>
              </div>
            </article>
          </div>
        </div>
      </main>
    </div>
  
    <script src="../js/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript">
      $('article.gallery').on("click", "a.thumbnail", function(e){
        var src = $(this).attr('href');
        var img = $(e.delegateTarget).find("img").first();
        if (src != img.attr('src').replace(/\\?(.*)/,'')){
          img.stop().animate({ opacity: '0' }, function(){
              $(this).attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
            }).load(function(){ $(this).stop().animate({ opacity: '1' }); 
          });
        }
        return false;
      });
    </script>
  </body>
</html>

I hope that helps you. If you have any questions, just let me know.

Hi Dave, Thank you so much! It is working perfectly. I knew it had something to do with the largeImg #ID… but I wasn’t too sure how to modify the Javascript. Again - very much appreciate your assistance with this.

You’re welcome :slight_smile: