prettyPhoto : 갤러리를 열려면 동적으로 사진을 추가하는 방법

Question

prettyPhoto를 사용하는 이미지 갤러리가 있습니다. 나는 그것에있는 사진을로드하기 위해 API를 사용합니다. 첫 번째 사진은 미리보기 이미지의 데이터 속성에서 사용할 수 있습니다. 나머지 이미지는 AJAX 호출로 가져옵니다.

앨범의 첫 번째 사진 (이미 DOM에있는 사진)이 완벽하게 표시됩니다. 그러나 AJAX 호출의 성공 함수에서 갤러리를 새 이미지로 다시로드합니다. 그 부분은 작동하지 않습니다.

내가 뭘 잘못하고 있니? HTML

:이

$('#gallery').on('click','.albumTrigger',function(e) { 
    // initialize gallery 
    $.fn.prettyPhoto({ 
    slideShow: 3000, 
    theme: 'dark_rounded', 
    social_tools: '' 
    }); 

    var api_images = []; 
    var api_titles = []; 
    var api_descriptions = []; 
    var albumData = $(this).find('.thumbImage').data('album'); 
    $.each(albumData,function(index,item) { 
    api_images.push(item.url); 
    api_titles.push(item.name); 
    api_descriptions.push(item.wf_description); 
    }); 
    $.prettyPhoto.open(api_images,api_titles,api_descriptions); 

    // Get rest of images via ajax 
    $.get('/gallery',{ 
    'id': $(this).attr('rel'), 
    'method': 'getAlbumImages' 
    },function(albumData) { 
    // I did console.log(albumData); here, and there was data 
    // add images to gallery 
    $.each(albumData,function(index,item) { 
     api_images.push(item.url); 
     api_titles.push(item.name); 
     api_descriptions.push(item.description); 
    }); 
    $.prettyPhoto.open(api_images,api_titles,api_descriptions); 

    }); 

    e.preventDefault(); 

}); 

편집 : 나는 코드의 첫 번째 블록을 제거하면

무슨 일이 열립니다는

<a href="/images/test.jpg" class="albumTrigger" rel="129"> 
    <img src="/images/test.jpg?rwidth=100&quality=100" id="thumbImage5418" class="thumbImage" data-album='[{"description":"","name":"test.jpg","id":5418,"url":"\/images\/test.jpg"}]'> 
</a> 

자바 스크립트 (나는 unnecassary 요소를 제거) prettyPhoto 완벽하게 작동합니다. 그러나 아약스 콜이 실행 된 후 갤러리가 열립니다. 아약스 호출이 실행되는 동안 사용자는 이미 앨범 사진을 볼 수 있습니다.

$.prettyPhoto.close(); 
$.prettyPhoto.open(...); 

Answer 1

는 먼저 갤러리를 닫고 다시 열 번째 .open 전화를 변경해보십시오