0
나는 여러 페이지의 Venobox 갤러리를 보유하고 있습니다. 일부 갤러리에는 수백 장의 사진이 있습니다. 그래서 각 갤러리의 처음 세 축소판 만 보여줍니다. 사용자가 어떤 갤러리 (축소판 클릭을)보기 시작하면라이트 박스 (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를 구현하기로 결정했지만이 문제가 있습니다.
스크립트 : 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();
}
});
}
}
})});