Question

我在jQuery中设置了以下图库： -

<script type="text/javascript">
  $(function () {
      $(".image").click(function () {
          var image = $(this).attr("rel");
          $('#galleryImage').hide();
          $('#galleryImage').fadeIn('slow');
          $('#galleryImage').html('<img src="' + image + '"/>');
          return false;
      });
      $("#galleryImage").click(function () {
          var imageLarge = $(this).attr("rel");
          $('#galleryImage').html('<a href="' + imageLarge + '"/>');
          $('#galleryImage a').lightBox();
      });
  });

<div id="galleryImage">

        <a href=""><img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" /></a>
</div>

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image">
        <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a>

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image">
        <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a>

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image">
        <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a>

单击缩略图时会获取rel属性值并将其插入galleryImage div，允许用户通过缩略图选择不同的图像，这些缩略图都显示在一个位置。

现在，我想要做的是将灯箱应用到#galleryImage div中的当前图像，这样如果用户点击它，就会通过灯箱插件出现更大的版本，但我不能非常了解如何做到这一点，这是我到目前为止，我正朝着正确的方向前进？

Answer 1

修正了它，用过：

$(".image").click(function() {
    var image = $(this).attr("rel");
    var imageLarge = $(this).attr("title");
    $("#galleryImage img").attr("src",image);
    $("#galleryImage a").attr("href", imageLarge);
    return false;
}

使用存储大图像的网址的标题值，取自当前选定的缩略图，只需在jQuery中设置属性值，而不是将一堆HTML直接插入div

jQuery灯箱插件/库的问题

1 个答案: