Javascript 使 JQuery LightBox 插件与多个画廊一起工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2051294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making JQuery LightBox Plugin work with multiple galleries
提问by lpdahito
I'm trying to make this jquery plugin => http://leandrovieira.com/projects/jquery/lightbox/work with multiple galleries on the same page.
我正在尝试使这个 jquery 插件 => http://leandrovieira.com/projects/jquery/lightbox/在同一页面上与多个画廊一起工作。
The problem is, everytime I click on a picture from a certain gallery, I get all the pictures from all the galleries on the same page. Let's say i've got 2 galleries of 6 photos each. If I click on a pic from gallery 1, I will see the pics from gallery 2 as well.
问题是，每次我点击某个图库中的图片时，我都会在同一页面上获得所有图库中的所有图片。假设我有 2 个画廊，每个画廊 6 张照片。如果我点击图库 1 中的图片，我也会看到图库 2 中的图片。
I've tried something like this to make it work but no success:
我试过这样的事情来使它工作但没有成功：
<script type="text/javascript">
$(function(){
$('div.gallery-6').each(function() {
$(this).find('a.lightbox').lightBox();
});
});
</script>
Unfortunately, it doesn't work!!!
不幸的是，它不起作用！！！
What's the workaround for that?
有什么解决方法？
Once again, what I'm trying to accomplish is to be able to view the pictures in their proper gallery. I don't want all the pics to be treated as one gallery.
再一次，我想要完成的是能够在他们适当的画廊中查看图片。我不希望所有的照片都被视为一个画廊。
回答by Cadoo
With very few changes I made this work with multiple galleries on one page.
通过很少的更改，我在一页上使用多个画廊完成了这项工作。
The JQuery
JQuery
$(function() {
$('#gallery1 a').lightBox();
$('#gallery2 a').lightBox();
...
$('#galleryN a').lightBox();
});
The HTML
HTML
<div class="gallery" id="gallery1">
<div class="gallery" id="gallery2">
...
<div class="gallery" id="galleryN">
I changed the style from an id to a class.
我将样式从 id 更改为类。
回答by Daniel Avellaneda
This a patch for Ben's answer, for those who waht to use multiple galleries, or simply add the lightbox effect to an image, use it inside your <head>...</head>tag
这是 Ben 回答的补丁，对于那些想要使用多个画廊或只是将灯箱效果添加到图像的人，在您的<head>...</head>标签中使用它
Here's the code (Note: I changed the variable $for jQuery, it works better for me):
下面的代码（注：我改变了可变$的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>
This is an example mixing all possible uses, they all can work in the same html, here we have two galleries and a third one with no name, just the "lightbox" reference:
这是一个混合所有可能用途的示例，它们都可以在同一个 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" />
I hope this helps!
我希望这有帮助！
回答by Codeblind
I do it this way:
我这样做：
<script type="text/javascript">
$(function(){
$('.lightboxGallery').each(function(){
$('.lightbox', this).lightBox();
});
});
</script>
This way all you have to do is place each gallery in some kind of container and you'll get one image set per container, for example, the following will create two image sets:
这样你所要做的就是将每个画廊放在某种容器中，每个容器都会得到一个图像集，例如，以下将创建两个图像集：
<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>
You could use the 'a' selector instead but I find using '.lightbox' offers more flexibility.
您可以改用“a”选择器，但我发现使用“.lightbox”提供了更大的灵活性。
回答by Ben
Alternately, you could do something like this to automatically wire up any lightbox[insert gallery name here] links, like the standard lightbox.js functionality:
或者，您可以执行以下操作来自动连接任何灯箱[在此处插入画廊名称] 链接，例如标准的 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(); });
});
回答by Honshi
All you need is lightbox 2 which you can get it from the link below.
您所需要的只是灯箱 2，您可以从下面的链接中获取它。
http://www.huddletogether.com/projects/lightbox2/
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>
You can set your different sets of gallery using "lightbox[roadtrip]" just rename the "roadtrip" with your desired gallery group name and it'll work like magic. No need to code for anything extra
您可以使用“lightbox[roadtrip]”设置不同的图库集，只需使用您想要的图库组名称重命名“roadtrip”，它就会像魔术一样工作。无需额外编码
回答by Jon Daley
Perhaps lightbox has changed since other answers were given, but I thought the answers on this page were good, but then I discovered that I could simply do:
也许自从给出其他答案以来，灯箱已经改变了，但我认为这个页面上的答案很好，但后来我发现我可以简单地做：
jQuery('.lightbox').each(function(){
jQuery('a', this).lightBox();
});
That assumes an HTML structure of:
假设 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>
The wrapper class isn't needed, I think, but my code included it for other reasons.
我认为不需要包装器类，但我的代码出于其他原因包含它。
回答by Silvère Héraudeau
You can also do it without JavaScript at all with the data-attributes.
您也可以使用 data-attributes 在完全不使用 JavaScript 的情况下完成此操作。
<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>
It works also if the images are mixed up in the page.
如果图像在页面中混合，它也适用。
<div id="gallery">
<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-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.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-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.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>
<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-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.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>
<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-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a>
<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-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a>
</div>
回答by AntoNB
Here's how I made the basic jquery lightbox linked in the original question behave with multiple galleries. No hacks, or anything. Works flawlessly.
下面是我如何使原始问题中链接的基本 jquery 灯箱与多个画廊一起工作。没有黑客，或任何东西。完美运行。
I gave every lightbox a seperate name:
我给每个灯箱一个单独的名字：
<script type="text/javascript" charset="utf-8">
$(function() {
$('a[@rel*=lightboxG1]').lightBox();
$('a[@rel*=lightboxG2]').lightBox();
});
</script>
Then my HTML looks like this:
然后我的 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>
And voila, I have 2 separate galleries.
瞧，我有 2 个独立的画廊。
回答by Mark Hurd
Can't say I've worked with this particular plugin before, but usually you add a rel=lightbox[foo]to the link element. Foo will be unique for each gallery on the page.
不能说我以前使用过这个特定的插件，但通常你rel=lightbox[foo]会在链接元素中添加一个。Foo 对于页面上的每个画廊都是唯一的。
Hope this gets you started on the right path; otherwise there are dozensof other lightbox plugins you can use.
希望这能让你走上正确的道路；否则，您可以使用许多其他灯箱插件。
