将元素动态添加到灯箱 (Venobox) 画廊

Question

我在同一页面上有几个 Venobox 个画廊。有些画廊有数百张照片，这就是为什么我只显示每个画廊的前 3 个缩略图。

<a class="venobox loadmore loadmore1" title="" data-gall="gal1" data-vbtype="ajax" data-bid="x-y-z-1" href="/show.php?pid=1"><img src="thumb1.jpg" /></a>
<a class="venobox loadmore loadmore1" title="" data-gall="gal1" data-vbtype="ajax" data-bid="x-y-z-1" href="/show.php?pid=2"><img src="thumb2.jpg" /></a>
<a class="venobox loadmore loadmore1" title="" data-gall="gal1" data-vbtype="ajax" data-bid="x-y-z-1" href="/show.php?pid=3"><img src="thumb3.jpg" /></a>

<div class="hidden showmore1"></div>

<a class="venobox loadmore loadmore2" title="" data-gall="gal2" data-vbtype="ajax" data-bid="x-y-z-2" href="/show.php?pid=4"><img src="thumb4.jpg" /></a>
<a class="venobox loadmore loadmore2" title="" data-gall="gal2" data-vbtype="ajax" data-bid="x-y-z-2" href="/show.php?pid=5"><img src="thumb5.jpg" /></a>
<a class="venobox loadmore loadmore2" title="" data-gall="gal2" data-vbtype="ajax" data-bid="x-y-z-2" href="/show.php?pid=6"><img src="thumb6.jpg" /></a>

<div class="hidden showmore2"></div>

当用户开始查看某个图库（点击任何缩略图）时，点击的图像必须出现并且后台脚本必须加载该图库的所有缩略图（图像链接）：

<div class="hidden showmore1">
<a class="venobox loadmore loadmore1" title="" data-gall="gal1" data-vbtype="ajax" data-bid="x-y-z-1" href="/show.php?pid=7"><img src="thum7.jpg" /></a>
<a class="venobox loadmore loadmore1" title="" data-gall="gal1" data-vbtype="ajax" data-bid="x-y-z-1" href="/show.php?pid=8"><img src="thumb8.jpg" /></a>
<a class="venobox loadmore loadmore1" title="" data-gall="gal1" data-vbtype="ajax" data-bid="x-y-z-1" href="/show.php?pid=9"><img src="thumb9.jpg" /></a>
</div>

问题

当我单击任何缩略图时，脚本加载其余图像但不显示单击的图像。我只能单击新加载的缩略图，但不能单击前三个缩略图中的任何一个。同时当我打开一个新加载的图像并点击"previous"箭头时，我也可以看到前3张照片。

所有这些都适用于 PrettyPhoto 脚本，但 PrettyPhoto 没有响应，所以我决定实施 Venobox 但遇到了这个问题。

脚本：

jQuery(function($){$(document).ready(function(){ 

  var handler = function(e){
    e.preventDefault();
    e.stopPropagation();
    var href = $(this).attr("href");
    var dbid = $(this).attr("data-bid");
    var myarr = dbid.split("-");
    var ftip = myarr[0];
    var fnum = myarr[1];
    var falb = myarr[2];
    var fpoid = myarr[3];
    var order_by = myarr[4];

    if($(this).hasClass('loadmore')) { 
      $.ajax({
        method: "POST",
        url: "/loadmore.php",
        data: {poid:fpoid,alb:falb,typ:ftip,num:fnum,order_by:order_by},   
        success: function(d){  

          $('#showmore'+fpoid).html(d);  
          $('.loadmore'+fpoid).removeClass('loadmore'); //removing class so that new images load only once 

          $("a[data-gall^='gal"+fpoid+"'").venobox(); //reactivating venobox
          $("a[data-gall^='gal"+fpoid+"'").filter("a[href='" + href + "']").click();

        }
      });
    }  
  }
})});

Answer 1

来自venobox；触发点击的方式是 $("#firstlink").venobox().trigger('click');

也有回调可以用于上面的代码（上面的细节link）

将元素动态添加到灯箱 (Venobox) 画廊

Dynamically adding elements to a lightbox (Venobox) gallery

javascript

jquery

lightbox