Question

我正在使用来自osvaldas.info的非常棒的灯箱脚本。使用此脚本需要以下html代码：

<a href="/img/gallery-1.jpg" data-imagelightbox="a"><img src="/img/thumb_1.jpg"></a>
<a href="/img/gallery-2.jpg" data-imagelightbox="a"><img src="/img/thumb_1.jpg"></a>
<a href="/img/gallery-3.jpg" data-imagelightbox="a"><img src="/img/thumb_1.jpg"></a>
<a href="/img/gallery-4.jpg" data-imagelightbox="a"><img src="/img/thumb_1.jpg"></a>
<a href="/img/gallery-5.jpg" data-imagelightbox="a"><img src="/img/thumb_1.jpg"></a>
<a href="/img/gallery-6.jpg" data-imagelightbox="a"><img src="/img/thumb_1.jpg"></a>

页面上的下一个图库将与data-imagelightbox="b"或类似内容一起使用。

在我的HTML文件的末尾，我必须像下面这样定义这个库：

var selector = 'a[data-imagelightbox="a"]';
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' ); }
});

到目前为止，这项工作真的非常棒，但如果我的页面上有未知数量的图库，我也不知道该怎么办。 html输出是从数据库生成的。是否有可能更改js代码，以便在有data-imagelightbox =＆＃34;＆＃34;参数β

我不想多次重复html页面底部的js代码，只是为了更改一个字母。

由于

Answer 1

我还没有使用过那个库，但这个jquery选择器应该可以工作！

试试这个：

var selector = 'a[data-imagelightbox]';
var done = array();
$( selector ).each(function(){
     var letter = $(this).attr("data-imagelightbox");
     if(done.indexOf(letter) == -1 ){
          //Prevents multiple initialisation. 
          done.push(letter);
          sel = 'a[data-imagelightbox=' + letter + ']';

          var lightbox = $( sel ).imageLightbox(
          {
              quitOnDocClick: false,
              onStart: function() { overlayOn(); closeButtonOn( lightbox ); arrowsOn( lightbox, sel ); },
              onEnd: function() { overlayOff(); closeButtonOff(); arrowsOff(); },
              onLoadStart: function() { },
              onLoadEnd: function() { $( '.imagelightbox-arrow' ).css( 'display', 'block' ); }
    });
     }
});

在网页上使用具有相同js代码的灯箱多次

1 个答案: