我有几个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>
问题
当我单击任何缩略图时,脚本会加载其余图像,但不显示单击的图像。我只能单击新加载的缩略图,但无法单击前三个缩略图中的任何一个。同时,当我打开新加载的图像并单击“上一张”箭头时,我也可以看到前 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();
}
});
}
}
})});
最佳答案
来自venobox ;触发点击的方式是 $("#firSTLink").venobox().trigger('click');
您还可以在上面的代码中使用回调(上面的链接中有详细信息)
关于javascript - 动态添加元素到灯箱 (Venobox) 画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46160917/