Prettyphoto:如何动态添加照片为开放画廊

Question

我使用PrettyPhoto有一个图像 - 套装。我使用API将照片加载到其中。第一张照片可在缩略图上的数据属性中找到。其余图像用Ajax-call获取。

专辑的第一张照片（DOM中已经存在的照片）正在完美显示。但是在Ajax呼叫的成功功能中，我将使用新图像重新加载画廊。那部分不起作用。

我在做什么错？

html：（我删除了未清达元素）

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

JavaScript：

$('#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();
});

编辑：

如果我删除了第一个代码打开的代码块，则可以完美。但是现在，在Ajax-call运行之后，画廊开始了。这个想法是，当Ajax-call正在运行时，用户已经看到了专辑。

Answer 1

尝试将第二个呼叫更改为首先关闭画廊，然后再次打开它：

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