I’m loading images through JSON into #photographs. It initially loads 10 shots and when you scroll down to a certain point (using waypoints), it should ‘refresh’ the JSON feed so that an extra 5 shots are loaded. I’m using the // &per_page=’ + itemsLoaded // for this in the JSON URL. It’s the var itemsLoaded that gets updated with +5, everytime the waypoint is hit.
See code:
var itemsLoaded = 10;
$.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=' + itemsLoaded + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function (data) {
$.each(data.photoset.photo, function (i, flickrPhoto) {
var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";
var basePhotoURLMobile = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_z.jpg";
var flickrLink = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + flickrPhoto.id + "/";
var $img = $("<img/>").attr("src", basePhotoURL);
var $imgMobile = $("<img/>").attr("src", basePhotoURLMobile);
var $wrap = $("<div class='item'></div>");
$(".item:nth-child(9n)").addClass("tenth");
if($(window).width() < 501) {
$wrap.append($imgMobile);
} else {
$wrap.append($img);
}
$wrap.append("<a href='" + basePhotoURL + "'.jpg' title='View full size' class='zoom' rel='enroll' />");
$wrap.append("<a href='" + flickrLink + "' class='flickr' title='View on Flickr' target='_blank' />");
$wrap.appendTo('#photographs');
});
var loaded = 0;
var totalAmount = $('#photographs .item').length;
$('#photographs .item img').each(function() {
loaded;
$(this).imagesLoaded(function($images) {
loaded++;
var percentage = parseInt((loaded / 11) * 100);
console.log(loaded + ' van de ' + totalAmount);
$("#bigloader").progressbar({
value: percentage
});
if(loaded == 10) {
$("#photographs, #loader").fadeIn("fast");
$("#bigloader, #preloading").fadeOut("fast");
$("#photographs").gridalicious({
gutter: 2,
animate: true,
effect: 'fadeInOnAppear',
width: 430
});
$('.item.tenth').waypoint({
triggerOnce: true,
handler: function(){
console.log("arrived at trigger");
itemsLoaded = itemsLoaded + 5;
},
offset: '50%'
});
} else if (loaded == totalAmount) {
$("#loader").fadeOut("fast");
};
});
});
Extra explanation:
The itemsLoaded var gets updated with a +5 value, each time a waypoint has been hit. The itemsLoaded is the key to my number of items loaded through JSON; so that JSON feed needs to get refreshed.
Basically, how can i update my existing JSON feed with an updated variable?
In order to make a new call to the flickr API, you need to wrap your “$.getJSON” method in a function that you can call again when the waypoint is hit.
I believe you also have an error, in that you are appending the elements to the container, but you want to append the next 10 elements rather than retrieve all the same elements plus 5. And so I would suggest that you use a variable that references the page to be loaded from the flickr API instead of the amount of elements to be loaded.
I believe you are using the jquery waypoint plugin, you can see in fact that in this example only the next items are being retrieved and appended to the container element. I believe that is what you are trying to do, because you are doing an append to the container element. So I would suggest to use a variable that references the page to be retrieved rather than the amount of elements to be retrieved. The amount of elements will always be 10, but you will retrieve the next page of 10 elements and append them to the container.
Changing this variable, the solution to your problem is as simple as this: