jQuery 灯箱插件/图库问题

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 中，从而允许用户通过全部显示在一个位置的缩略图来选择不同的图像。

现在，我想做的是将 lightbox 应用到 #galleryImage div 中的当前图像，这样，如果用户单击它，就会通过 lightbox 插件出现更大的版本，但我可以'我不太清楚该怎么做，这就是我到目前为止所拥有的，我的方向正确吗？

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;
}

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