SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    You're welcome


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •