Question

我有一个使用prettyPhoto的图片库。我使用api来加载照片。第一张照片在缩略图的数据属性中可用。其余的图像是通过AJAX调用获取的。

专辑的第一张照片（已经在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();

});

修改

如果我删除了打开prettyPhoto的第一个代码块，它就可以完美运行。但现在画廊在ajax-call运行后打开了。有点想法是，当ajax-call正在运行时，用户已经看到了专辑照片。

Answer 1

尝试更改第二次.open调用，先关闭图库，然后重新打开：

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

prettyPhoto：如何动态添加照片到打开图库

1 个答案: