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>

ジャバスクリプト:

$('#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 が実行されている間、ユーザーには既にアルバム写真が表示されているということです。

4

1 に答える 1

0

2 番目の .open 呼び出しを変更して、最初にギャラリーを閉じてから再度開くようにしてください。

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