使 JQuery LightBox 插件与多个画廊一起工作答案

【问题标题】：Making JQuery LightBox Plugin work with multiple galleries使 JQuery LightBox 插件与多个画廊一起工作
【发布时间】：2011-01-04 07:26:47
【问题描述】：

我正在尝试制作这个 jquery 插件 => 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>

不幸的是，它不起作用！！！

解决方法是什么？

再一次，我想要完成的是能够在适当的图库中查看图片。我不希望所有图片都被视为一个画廊。

【问题讨论】：

把你要匹配的 HTML 也和选择器放在一起（我认为这是一个选择器问题）
另外，$( 'div.gallery-6 a.lightbox' ).lightBox( ); 和你用更少的代码做的事情是一样的（很确定它是完全一样的）
这不是...因为我希望插件将我的画廊视为 2 个不同的画廊。假设一个画廊包含一组图片，另一个画廊包含另一组图片。当您浏览第一个画廊时，您应该看不到其他画廊。

标签： javascript jquery wordpress lightbox

【解决方案1】：

只做了很少的改动，我就在一个页面上使用了多个画廊。

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。

【讨论】：

我刚刚尝试了这个解决方案......它工作得很好，谢谢。但是为什么，在那种情况下，我以前的代码不起作用？我的意思是，调用 lightbox 函数两次与查找元素相同，在我的情况下是画廊 div，然后在每个画廊 div 上找到“a”元素并调用 lightbox 函数......我不必给画廊一个ID 因为我在画廊 div 上调用 each() 方法。
还有$('.gallery').each(function(i) { $('#gallery'+i).lightbox(); });

【解决方案2】：

这是 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" />

我希望这会有所帮助！

【讨论】：

【解决方案3】：

我是这样做的：

<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”提供了更大的灵活性。

【讨论】：

这是迄今为止最好的解决方案。谢谢，只使用“a”标签而不是在每个链接中添加“.lightbox”效果很好。

【解决方案4】：

或者，您可以执行以下操作来自动连接任何灯箱[在此处插入画廊名称]链接，例如标准的 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(); });

});

【讨论】：

【解决方案5】：

您只需要 Lightbox 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”，它就会像魔术一样工作。无需编写任何额外代码

【讨论】：

【解决方案6】：

也许自从给出其他答案后灯箱已经改变，但我认为这个页面上的答案很好，但后来我发现我可以简单地这样做：

    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>

我认为不需要包装类，但我的代码出于其他原因包含它。

【讨论】：

【解决方案7】：

不能说我以前使用过这个特定的插件，但通常你会在链接元素中添加一个rel=lightbox[foo]。 Foo 对于页面上的每个画廊都是唯一的。

希望这能让您走上正确的道路；否则你可以使用dozens 的其他灯箱插件。

【讨论】：

jQuery 灯箱让你可以使用任何你想将灯箱绑定到元素的选择器。因此，您不再必须将 rel="lightbox[optional_slide_show]" 放在您的元素上（就像在原始版本中一样）。但是，您可以使用 $( '[rel*="lightbox"]' ) jQuery 选择器来模仿这种行为。

【解决方案8】：

以下是我如何使原始问题中链接的基本 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 个独立的画廊。

【讨论】：

【解决方案9】：

您也可以使用数据属性完全不使用 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>

如果图像在页面中混合，它也可以工作。

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

【讨论】：