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();
});

但是上面的代码不起作用（它会抛出错误“未定义的选择器”）并继续以完整的顺序打开上面的6个图像，而不是将它们分成两个不同的集合......

关于如何做到这一点的任何想法？

谢谢！

Answer 1

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

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

Answer 2

早期答案已删除

修改

在研究了demo page之后，看起来通过在集合上调用data-imagelightbox之前为每个图库指定.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="gal-1"，class="gal-2"等未使用且可以删除。

重写了硬编码的data-imagelightbox="b"属性，可以将其删除。

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在页面中分隔图像库

4 个答案: