SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    89
    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,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
    89
    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,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
    89
    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,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
  •