使用 imagelightbox.js 分隔页面中的图片库

Question

我正在使用 Osvaldas Valutis 出色的 imagelightbox.js 脚本 (http://osvaldas.info/image-lightbox-responsive-touch-friendly)。它工作正常，但它不允许我将一堆图像分成同一页面内的单独画廊（它迭代所有图像）。

我想让页面中的所有图像都具有相同的数据属性（data-imagelightbox="b"），以便它们都以相同的方式显示，但是找到一种方法将它们分组到单独的画廊，这样当你打开一个属于 3 个画廊的图像时，它只会迭代这 3 个图像，然后你可以关闭这个画廊，然后打开下一个。

<div class="gallery-1">
<a href="images/big/a-1.png" data-imagelightbox="b" class="gal-1">thumb</a>
<a href="images/big/a-2.png" data-imagelightbox="b" class="gal-1">thumb</a>
<a href="images/big/a-3.png" data-imagelightbox="b" class="gal-1">thumb</a>
</div>
<div class="gallery-2">
<a href="images/big/b-1.png" data-imagelightbox="b" class="gal-2">thumb</a>
<a href="images/big/b-2.png" data-imagelightbox="b" class="gal-2">thumb</a>
<a href="images/big/b-3.png" data-imagelightbox="b" class="gal-2">thumb</a>
</div>

我假设最好的方法是使用不同的选择器将图像分成画廊，例如：

var galleries = [ '.gal-1', '.gal-2', '.gal-3', '.gal-4' ];
$.each( galleries, function()
{
$( selector ).imageLightbox();
});

但是上面的代码不起作用（它抛出错误"undefined selector"）并且继续完整地打开上面的6张图像，而不是将它们分成两个不同的集合...

关于如何做到这一点有什么想法吗？

谢谢！

Answer 1

先前的回答已删除

编辑

研究了demo page后发现，在对集合调用.imageLightbox()之前，为每个图库指定data-imagelightbox的值会形成单独的图库，这有点疯狂但嘿嘿！

您可以在 HTML 中设置 data-imagelightbox 值，但在 javascript 中这样做可能更容易，如下所示：

$(".gallery-1 a").data('imagelightbox', 'a').imageLightbox();
$(".gallery-2 a").data('imagelightbox', 'b').imageLightbox();
$(".gallery-3 a").data('imagelightbox', 'c').imageLightbox();
$(".gallery-4 a").data('imagelightbox', 'd').imageLightbox();

因此：

你的 class 名字 class="gal-1", class="gal-2" 等没有被使用，可以删除。
硬编码 data-imagelightbox="b" 属性被覆盖，可以删除。

Answer 2

这个方法确实有效，以防其他人遇到同样的问题：

var galleries = [ '.animals', '.flowers', '.trees', '.birds' ]; $.each( galleries,
function() { $( selector ).imageLightbox(); });

Answer 3

我对这个插件有同样的问题。我想创建 3 个具有相同数据属性的画廊。每个画廊将有一个缩略图打开多张图片。

我对每个画廊做了什么：

<div class="gallery1">
  <a href="/1.jpg" rel="group1" data-imagelightbox="f">
     <img src="images/gallery1.jpg">
  </a>
 <a href="/2.jpg" rel="group1" data-imagelightbox="f">
     <img style="display: none;" src="" alt="Example"/> /* This helped find the image */
 </a>
</div>

在 javascript 中，我为 "f" 复制了相同的功能，但将其更改为新字母 "x"，依此类推。现在每个画廊都独立工作。

希望对您有所帮助

Answer 4

这就是我的解决方案，而且工作得非常好，我希望这可以帮助某人。

我在灯箱配置后将它放在我的 JS 脚本中：

var dataSelector = '';
$(GALLERY_CONTAINER_SELECTOR).each(function(index, el) {
  dataSelector = $(this).find(IMAGE_ANCHOR_SELECTOR).attr('data-imagelightbox');

  var selector = 'a[data-imagelightbox="' + dataSelector + '"]';
  var instance = $(selector).imageLightbox({
    onStart:    function() { overlayOn(); closeButtonOn( instance );  },
    onEnd:      function() { overlayOff(); captionOff(); closeButtonOff(); activityIndicatorOff(); },
    onLoadStart:  function() { captionOff(); activityIndicatorOn(); },
    onLoadEnd:    function() { captionOn(); activityIndicatorOff(); }
  });
});

而 HTML 看起来像：

<div class="GALLERY_CONTAINER_SELECTOR">
  <a class="IMAGE_ANCHOR_SELECTOR" href="IMAGE_URL_1" data-imagelightbox="YOUR_GALLERY_NAME">IMAGE_1</a>
  <a class="IMAGE_ANCHOR_SELECTOR" href="IMAGE_URL_2" data-imagelightbox="YOUR_GALLERY_NAME">IMAGE_2</a>
  <a class="IMAGE_ANCHOR_SELECTOR" href="IMAGE_URL_3" data-imagelightbox="YOUR_GALLERY_NAME">IMAGE_3</a>
  <!-- Add as many images as needed -->
</div>

使用 imagelightbox.js 分隔页面中的图片库

Separate image galleries in a page with imagelightbox.js

jquery

image-gallery