圖像不是在使用ajax的燈箱中打開

Question

我正在使用漂亮的照片庫。我必須在燈箱中打開縮略圖，但是當我點擊縮略圖時，它會在新窗口中打開，而不是在燈箱中打開。

圖片是從json文件中使用ajax加載：

var article = ""; 
$.each(data, function(index, value) { 
    article +="<article class='entry isotope-item "+value.pcat_slug+"'><a href='images/portfolio/"+value.pcat_slug+"/"+value.pimg_name+"' rel='prettyPhoto[pp_gal]' data-rel='prettyPhoto'><img class='img-responsive' data-original='images/portfolio/"+value.pcat_slug+"/"+value.pimg_name+"' alt='"+value.pcat_name+"' title='"+value.pcat_name+"' src='images/portfolio/"+value.pcat_slug+"/"+value.pimg_name+"' /><span class='magnifier'></span></a></article>"; 
    //li +="<li class='"+value.cat_slug+"'><img src='images/portfolio/logo/"+value.pcat_slug+"/"+value.pimg_name+"'/></li>"; 
}); 

$(".portfolio").empty(); 
$(".portfolio").append(article); 
$(".portfolio").append("<div class='clear'></div>"); 

圖像將顯示在這個div從阿賈克斯加載後：

<div class="portfolio"></div> 

我使用下面的代碼來打開彈出：

/*prettyPhoto*/ jQuery(document).ready(function(){ 
    jQuery('a[data-gal]').each(function() { jQuery(this).attr('rel', jQuery(this).data('gal'));}); jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false}); 
}); 

Answer 1

您應該使用window.load而不是document.ready。請參閱下面的代碼。

jQuery(window).load(function(){ 
jQuery('a[data-gal]').each(function() { jQuery(this).attr('rel', jQuery(this).data('gal'));}); 
jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false}); 
});