帮助为灯箱中同一页面上的多个链接制作单独的画廊答案

【问题标题】：Help with making a seperate gallery for multiple links on same page in lightbox帮助为灯箱中同一页面上的多个链接制作单独的画廊
【发布时间】：2011-03-09 13:20:15
【问题描述】：

我正在尝试从灯箱中的链接打开图片库，我已经掌握了基础知识，并且我有一个可以打开图片库的链接，但我在页面上有 6 个不同的链接我想要为每个图像打开一个不同的图像库，当我设置它时，它不显示画廊，只有一个图像。有没有办法复制这个：

HTML

 <div id='gallery'>
        <a href="images/big-image1.jpg">
            <img src="images/thumbnail-image1.jpg"/>
        </a>
        <a href="images/big-image2.jpg" ></a>
        <a href="images/big-image3.jpg" ></a>
        <a href="images/big-image4.jpg" ></a>
    </div>

$(document).ready(function() {
    $('#gallery a').lightBox();
});

对于每个设置，它们是否有效？我是否需要为它们分配不同的 div 名称才能使其正常工作？

谢谢，杰西卡

【问题讨论】：

您好，您的问题对我来说不是很清楚。您希望“#gallery”中的链接打开不同的画廊吗？他们从哪里获得画廊的图像列表？或者你有 6 个不同的 div 并且每个都应该打开一个新的画廊？
我有 6 个不同的 div 应该为每个打开一个新画廊，我拿出缩略图并添加了一个文本链接来激活灯箱。上面的例子是我在这个论坛上找到的对我有用的例子，但只适用于一个 div 和 5 个图像，当我尝试将它复制到下一个 div 时，它只显示第一个图像而没有其他......这更有意义？

标签： javascript jquery lightbox

【解决方案1】：

如果你有六个不同的 div，你将不得不调用 jQuery Lightbox 插件六次：

$(document).ready(function() {
  $('#gallery1 a').lightBox();
  $('#gallery2 a').lightBox();
  $('#gallery3 a').lightBox();
  $('#gallery4 a').lightBox();
  $('#gallery5 a').lightBox();
  $('#gallery6 a').lightBox();
});

另一种选择是只有一个 div 并且每个图像都有一个 rel 标签属性来将它们分组到画廊中：

HTML

<div id="gallery">

 <!-- gallery 1 -->
 <a href="full-image-1.jpg" rel="group1"><img src="thumb-1.jpg"></a>
 <a href="full-image-2.jpg" rel="group1"><img src="thumb-2.jpg"></a>
 <a href="full-image-3.jpg" rel="group1"><img src="thumb-3.jpg"></a>

 <!-- gallery 2 -->
 <a href="full-image-4.jpg" rel="group2"><img src="thumb-4.jpg"></a>
 <a href="full-image-5.jpg" rel="group2"><img src="thumb-5.jpg"></a>
 <a href="full-image-6.jpg" rel="group2"><img src="thumb-6.jpg"></a>

 <!-- gallery 3 -->
 <a href="full-image-7.jpg" rel="group3"><img src="thumb-7.jpg"></a>
 <a href="full-image-8.jpg" rel="group3"><img src="thumb-8.jpg"></a>
 <a href="full-image-9.jpg" rel="group3"><img src="thumb-9.jpg"></a>

 <!-- etc -->

</div>

然后使用这个脚本（你仍然需要运行它六次）：

$("#gallery a[rel=group1]").lightBox();
$("#gallery a[rel=group2]").lightBox();
$("#gallery a[rel=group3]").lightBox();
// etc

【讨论】：