CODEWITHSUNDEEP
javascriptjquery
Adam Janes
Adam Janes

Reputation: 3

Multiple jQuery image galleries on one page

I want to use this jQuery gallery more than once on my page: http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/

The first one works, the second is a no-go. http://www.lakecommunicators.com/apex/test/publicrelations.php

The galleries under the first two are done with JavaScript and I am trying to replace them with jQuery.

Please help me if you can.

The code is short so I hope this is a breeze for one of you gurus.

Upvotes: 0

Views: 2659

Answers (1)

Mike Geise
Mike Geise

Reputation: 825

Both your image galleries have the same id gallery which is not allowed in html and the same with the id thumbs, change the second one to gallery2 and thumbs2, etc. Make sure you update the javascript with the new id as well.

$('#thumbs').delegate('img','click', function(){

    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));

    $('#description').html($(this).attr('alt'));

});

$('#thumbs2').delegate('img','click', function(){

    $('#largeImage2').attr('src',$(this).attr('src').replace('thumb','large'));

    $('#description2').html($(this).attr('alt'));

});

the html

                      <div id="gallery2">

                          <div id="thumbs2"> <img src="images/image_01_thumb.jpg" alt="1st image description" /> <img src="images/image_02_thumb.jpg" alt="2nd image description" /> <img src="images/image_03_thumb.jpg" alt="3rd image description" /> <img src="images/image_04_thumb.jpg" alt="4th image description" /> <img src="images/image_05_thumb.jpg" alt="5th image description" /> </div>

                          <div id="panel2"> <img id="largeImage2" src="images/image_01_large.jpg" />

                            <div id="description2">1st image description</div>

                          </div>

                        </div>

                      </div>

Upvotes: 2

Related Questions