I’ve been trying to tackle this for quite some time now and can’t figure out how to do it hence me posting this question!
This code below loads in all my flickr images successfully -
jQuery(document).ready(function($) {
var apiKey = '??????';
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=<?php echo $this->getPhotosetId($_photo) ?>&format=json&jsoncallback=?',
function(data){
//loop through the results with the following function
$.each(data.photoset.photo, function(i,item){
//build the url of the photo in order to link to it
var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
//turn the photo id into a variable
var photoID = item.id;
//use another ajax request to get the tags of the image
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',
function(data){
var imgCont = '<div class="col-sm-3"><img src="' + photoURL + '"></div>';
$(imgCont).appendTo('.carousel-inner');
});
});//each
});
});
What I want to do is when all the images have loaded is run this bit of code -
jQuery(document).ready(function($) {
var divs = $(".carousel-inner .col-sm-3");
for(var i = 0; i < divs.length; i+=4) {
divs.slice(i, i+4).wrapAll("<div class='item'><div class='row'></div></div>");
}
$('.item').first().addClass('active');
});
When I place that last chunk of code into the getjson $.each loop the .wrapAll function gets added to every iteration but I just want .wrapAll to be applied when the loop has finished performing. How can this be done?