I have an image-gallery using prettyPhoto. I use the api for loading the photos in it. The first photo is available in a data-attribute on the thumbnail. The rest of the images are being fetched with an AJAX-call.
The first photo of the album (the one that is already in the DOM) is being shown perfectly. But in the success-function of the AJAX call I'm reloading the gallery with the new images. That part isn't working.
What am I doing wrong?
HTML: (I removed unnecassary elements)
<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();
});
EDIT:
If I remove the first block of code what opens prettyPhoto it works perfect. But now the gallery opens after the ajax-call has run. The idea kinda is that while the ajax-call is running, the user already sees the album-photo.
