我正在尝试制作这个jquery插件=＆gt; http://leandrovieira.com/projects/jquery/lightbox/ 在同一页面上使用多个画廊。
问题是，每当我点击某个图库中的图片时，我都会从同一页面上的所有图库中获取所有图片。假设我有2张画廊，每张6张照片。如果我点击图库1中的图片，我也会看到图库2中的图片。
我尝试过这样的事情，但是没有成功：
<script type="text/javascript">
$(function(){
$('div.gallery-6').each(function() {
$(this).find('a.lightbox').lightBox();
});
});
</script>
不幸的是，它不起作用!!!
该解决方法是什么？
再一次，我想要完成的是能够在他们合适的画廊中查看图片。我不希望所有的照片都被视为一个画廊。
答案 0 :(得分：8)
只需很少的更改，我就可以在一个页面上使用多个图库。
JQuery
$(function() {
$('#gallery1 a').lightBox();
$('#gallery2 a').lightBox();
...
$('#galleryN a').lightBox();
});
HTML
<div class="gallery" id="gallery1">
<div class="gallery" id="gallery2">
...
<div class="gallery" id="galleryN">
我将样式从id改为了class。
答案 1 :(得分：6)
这是Ben的答案的补丁，对于那些想要使用多个画廊，或者只是将灯箱效果添加到图像的人来说，在<head>...</head>标签中使用它
以下是代码（注意：我更改了$的变量jQuery，对我来说效果更好）：
<script type="text/javascript">
jQuery(function() {
var boxen = [];
//find all links w/ rel="lightbox[gallery_name]" or just rel="lightbox" it works both ways
jQuery('a[rel*=lightbox]').each(function() {
//push only unique lightbox[gallery_name] into boxen array
if (jQuery.inArray(jQuery(this).attr('rel'),boxen)) boxen.push(jQuery(this).attr('rel'));
});
//for each unique lightbox group, apply the lightBox
jQuery(boxen).each(function(i,val) { jQuery('a[rel='+val+']').lightBox(); });
});
</script>
这是混合所有可能用途的示例，它们都可以在同一个html中工作，这里我们有两个画廊，第三个没有名称，只有“灯箱”参考：
<a href="images/image1.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image1_thumbnail.jpg" width="50" />
<a href="images/image2.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image2_thumbnail.jpg" width="50" />
<a href="images/image3.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image3_thumbnail.jpg" width="50" />
<a href="images/image4.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image4_thumbnail.jpg" width="50" />
<a href="images/image5.jpg" rel="lightbox"><img border="0" height="50" src="images/image5_thumbnail.jpg" width="50" />
我希望这有帮助！
答案 2 :(得分：4)
我是这样做的：
<script type="text/javascript">
$(function(){
$('.lightboxGallery').each(function(){
$('.lightbox', this).lightBox();
});
});
</script>
这样你只需将每个图库放在某种容器中，每个容器就会得到一个图像集，例如，下面将创建两个图像集：
<div id="gallery1" class="lightboxGallery">
<a href="image1.jpg" class="lightbox">Image 1</a><br />
<a href="image2.jpg" class="lightbox">Image 2</a><br />
<a href="image3.jpg" class="lightbox">Image 3</a><br />
</div>
<div id="gallery2" class="lightboxGallery">
<a href="image4.jpg" class="lightbox">Image 4</a><br />
<a href="image5.jpg" class="lightbox">Image 5</a><br />
<a href="image6.jpg" class="lightbox">Image 6</a><br />
</div>
您可以使用'a'选择器，但我发现使用'.lightbox'可以提供更大的灵活性。
答案 3 :(得分：1)
或者，您可以执行以下操作，自动连接任何灯箱[在此处插入图库名称]链接，例如标准的lightbox.js功能：
$(function() {
var boxen = [];
//find all links w/ rel=lightbox[...
$('a[rel*=lightbox\\[]').each(function() {
//push only unique lightbox[gallery_name] into boxen array
if ($.inArray($(this).attr('rel'),boxen)) boxen.push($(this).attr('rel'));
});
//for each unique lightbox group, apply the lightBox
$(boxen).each(function(i,val) { $('a[rel='+val+']').lightBox(); });
});
答案 4 :(得分：1)
您需要的只是灯箱2，您可以从以下链接获取它。
http://www.huddletogether.com/projects/lightbox2/
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
您可以使用“lightbox [roadtrip]”设置不同的图库集，只需使用您想要的图库组名称重命名“roadtrip”，它就会像魔术一样工作。无需编写任何额外的代码
答案 5 :(得分：1)
也许灯箱已经改变，因为给出了其他答案，但我认为这个页面上的答案很好，但后来我发现我可以做到：
jQuery('.lightbox').each(function(){
jQuery('a', this).lightBox();
});
假定HTML结构为：
<div class="lightbox">
<div class="wrapper">
<a href="asdasd.jpg"><img src="asdasd.jpg"></a>
<a href="asdasd2.jpg"><img src="asdasd2.jpg"></a>
</div>
</div>
我认为不需要包装类，但我的代码包含了其他原因。
答案 6 :(得分：0)
不能说我之前使用过这个特定的插件，但通常你会在链接元素中添加rel=lightbox[foo]。 Foo对于页面上的每个图库都是唯一的。
希望这能让你开始走上正确的道路;否则你可以使用dozens个其他灯箱插件。
答案 7 :(得分：0)
以下是我在原始问题中链接的基本jquery灯箱与多个画廊的关系。没有黑客，或任何东西。工作完美无缺。
我给每个灯箱一个单独的名字：
<script type="text/javascript" charset="utf-8">
$(function() {
$('a[@rel*=lightboxG1]').lightBox();
$('a[@rel*=lightboxG2]').lightBox();
});
</script>
然后我的HTML看起来像这样：
<a href="images/image-1.jpg" rel="lightboxG1">image #1</a>
<a href="images/image-2.jpg" rel="lightboxG1">image #2</a>
<a href="images/image-3.jpg" rel="lightboxG1">image #3</a>
<a href="images/image-1.jpg" rel="lightboxG2">image #1</a>
<a href="images/image-2.jpg" rel="lightboxG2">image #2</a>
<a href="images/image-3.jpg" rel="lightboxG2">image #3</a>
瞧，我有2个独立的画廊。
答案 8 :(得分：0)
你也可以在没有JavaScript的情况下使用数据属性。
orderedList如果图像在页面中混合，也可以使用。
<div id="gallery-1">
<a href="images/image-1.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 1"><img src="images/image-1.jpg"></a>
<a href="images/image-2.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 2"><img src="images/image-2.jpg"></a>
<a href="images/image-3.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 3"><img src="images/image-3.jpg"></a>
</div>
<div id="gallery-2">
<a href="images/image-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.jpg"></a>
<a href="images/image-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.jpg"></a>
<a href="images/image-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a>
</div>
<div id="gallery-3">
<a href="images/image-7.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 1"><img src="images/image-7.jpg"></a>
<a href="images/image-8.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 2"><img src="images/image-8.jpg"></a>
<a href="images/image-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.jpg"></a>
</div>
<div id="gallery-4">
<a href="images/image-10.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 1"><img src="images/image-10.jpg"></a>
<a href="images/image-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a>
<a href="images/image-12.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 3"><img src="images/image-12.jpg"></a>
</div>