Question

我正在使用一个灯箱脚本，该脚本使用数据属性来了解哪些图像是图库的一部分。

要初始化图库，我必须执行以下操作：

var selector = 'a[data-imagelightbox="a"]';
var lightbox = $( selector ).imageLightbox({});

如果我不想在同一页面上的另一个画廊，我必须添加另一个：

var selector = 'a[data-imagelightbox="b"]';
var lightbox = $( selector ).imageLightbox({});

我尝试使用另一个选择器和.each函数来使其工作，而无需为每个库编写这两个代码行。但它没有用。问题是数据属性将具有此属性的所有图像分组到一个库中。如果我在没有a，b，c或d的情况下尝试它 - 我总是得到一个大型画廊而不是3个单独的画廊。

那么，有没有人能够在一个页面上使用未知数量的画廊，而无需在Javascript中定义每个画廊？

我制作了一个JSBIN，所以应该更容易尝试一下： http://jsbin.com/goqije/1/

感谢您的帮助！

Answer 1

Attribute selector也许？

而不是：

var selector = 'a[data-imagelightbox="b"]';
var lightbox = $( selector ).imageLightbox({});

和

var selector = 'a[data-imagelightbox="b"]';
var lightbox = $( selector ).imageLightbox({});

只需使用属性选择器：

var selector = 'a[data-imagelightbox]';
var lightbox = $( selector ).imageLightbox({});

或更好：

您可以对所有图库数据属性使用命名约定，如下所示：

gallery-1 , galery-2 , gallery-3然后使用属性选择器，如下所示：

 var selector = 'a[data-imagelightbox^="gallery"]';
 var lightbox = $( selector ).imageLightbox({});

解决方案二 ::

上述解决方案似乎存在冲突，这是一个略有不同的解决方案，利用naming convention（gallery-1，gallery-2 ...等）和for循环，请参阅此示例，请注意我正在使用for loop迭代所有a元素并转换其颜色red ::

HTML code ::

<a href="#"  data-test="test-1">One</a>
<a href="#"  data-test="test-2">Two</a>
<a href="#"  data-test="test-3">Three</a>

JS（Jquery）代码::

$(function () {
        str_elm = $('a');
        for (var i = 0; i < str_elm.length ; i++) {
            data_val = $(str_elm[i]).attr('data-test');
            str_temp = "a[data-test=" + '"'+  data_val  + '"' + "]";
            $(str_temp).css({'color' : 'red'});
        };
    });

FIDDLE HERE

您可以按照以下方式更改JS以满足您的需求::

$(function () {
        str_elm = $('a[data-imagelightbox^="gallery"]');
        for (var i = 0; i < str_elm.length ; i++) {
            data_val = $(str_elm[i]).attr('data-test');
            str_temp = "a[data-test=" + '"'+  data_val  + '"' + "]";
            $(str_temp).imageLightbox({}); // initialization here
        };
    });

希望有所帮助！干杯。

Answer 2

通过这种方式修复自己：

$('ul').each( function() {

    var id = $(this).find('a').attr('data-imagelightbox');

    var selector = 'a[data-imagelightbox="' + id +'"]';
    var lightbox = $( selector ).imageLightbox({
        quitOnDocClick: false,
        onStart: function() { overlayOn(); closeButtonOn( lightbox ); arrowsOn( lightbox, selector ); },
        onEnd: function() { overlayOff(); closeButtonOff(); arrowsOff(); },
        onLoadStart: function() { },
        onLoadEnd: function() { $( '.imagelightbox-arrow' ).css( 'display', 'block' ); }
    });

});

在一个页面上使用多个图像灯箱而不知道多少

2 个答案: