0

我有一个使用 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 调用运行后打开。这个想法有点像在运行 ajax 调用时，用户已经看到了相册照片。

4

1 回答 1

0

尝试将您的第二个 .open 调用更改为首先关闭图库，然后再次打开它：

$.prettyPhoto.close();
$.prettyPhoto.open(...);
于 2012-10-18T10:05:28.837 回答