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