一個頁面上有多個jQuery圖像庫

Question

我想在我的頁面上多次使用這個jQuery庫： http ： //workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/

第一個是有效的，第二個是禁止的。 http://www.lakecommunicators.com/apex/test/publicrelations.php

前兩個畫廊都是用JavaScript完成的，我試圖用jQuery替換它們。

如果可以，請你幫助我。

代碼很短，所以我希望這對你們中的一個大師來說是輕而易舉的。

Answer 1

您的圖片庫都具有相同的ID庫，這在html中是不允許的，與id拇指相同，將第二個更改為gallery2和thumbs2等。確保您使用新ID更新javascript。

$('#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'));

});

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>