jQuery 灯箱插件/库的问题答案

【问题标题】：Issue with jQuery lightbox plugin/galleryjQuery 灯箱插件/库的问题
【发布时间】：2012-03-13 04:07:40
【问题描述】：

我在 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 中的当前图像，这样如果用户点击它，通过灯箱插件会出现更大的版本，但我不太明白我的头是怎么做的，这就是我到目前为止所拥有的，我是否朝着正确的方向前进？

【问题讨论】：

标签： javascript jquery jquery-plugins lightbox

【解决方案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 中设置属性值，而不是在 div 中插入一堆 HTML

【讨论】：