2017-09-11 133 views
0

我有幾個Venobox畫廊在同一頁上。一些畫廊有數百張照片,這就是爲什麼我只顯示每個畫廊的前3個縮略圖。動態添加元素到燈箱(Venobox)畫廊

<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> 

當我點擊任何縮略圖,腳本加載圖像的其餘部分,但不顯示圖像點擊的問題。我只能點擊新加載的縮略圖,但不能點擊前三個縮略圖中的任何一個。與此同時,當我打開一個新加載的圖像並單擊「上一個」箭頭時,我也可以看到前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(); 

     } 
     }); 
    } 
    } 
})}); 

回答

0

venobox;觸發點擊的方式是 $(「#firstlink」)。venobox()。trigger('click');

也有回調你可以使用上面的代碼(詳細信息在上面的鏈接)