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>

一个页面上有多个jQuery图像库

1 个答案: