asked on jQuery Flickr Loader
I've created an image gallery that pulls in images from Flickr. Initially, I have 5 images loaded and have added a button underneath labelled "Load More". I basically need to adjust my code so that when I click the button it gives me the next 5 images (right now, it just loads the same 5 images). I tried creating a counter variable that adds on 5 each time the button is clicked but couldn't get it to work. Any help would be greatly appreciated. You can check out my code here: http://bit.ly/1aReYxl
Thanks in advance!
Thanks in advance!
JavaScriptjQueryWeb Development
Last Comment
Adam
You have to do the paging yourself. The feed will return all matches to your search so store the entire response in an array and when you want to load more just show the next 5.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Leakim971 - Great minds think alike ;)
:))
ASKER
Thanks fellas. Didn't know who to gave the points to so I split them down the middle. Hope that's cool! Cheers.
That was the fairest thing to do. I'm happy that we didn't cause confusion and both said the same thing!
ASKER
This may be a little late but I notice that after hitting "Load more" a few times on @tagit's example, it keeps loading the same images. On @leakim971's example the button just stops working. I'm assuming this has to do with some sort of limit on how many photos you can call from the Flickr API? Or am I overlooking something? If this is a much bigger issue, I can always open up a new question.
That feed only gives you the last 20 uploads for that particular tag. If you want more than this then you'll need to look at the api and use a server side script to do the rest
http://www.flickr.com/services/api/flickr.photos.search.html
http://www.flickr.com/services/api/flickr.photos.search.html
ASKER
Crap! Alright, thanks @tagit. I'll have to look into it further.
Yeah i know... you'll need to get an api key, but the server side just needs to relay the request so it would be fairly simple
ASKER
Thanks @tagit. Looking at it a bit closer though, it looks as if the way that the Flickr call is constructed using the API key is a bit different than the method I've been using. Unfortunately, I can't seem to get it to work using the approach you guys suggested. I'm also not that advanced with JS so it could be I'm just approaching it all wrong... :(
If you think you'd be able to lend a hand, I can open up a new question to give you some extra points.
If you think you'd be able to lend a hand, I can open up a new question to give you some extra points.
Actually you can call the REST api!! : http://jsbin.com/uYUmIwi/3/edit
var index = 0;
var num = 5;
var photos = [];
function loadFlickr() {
index++;
var flickerAPI = "http://api.flickr.com/services/rest/?jsoncallback=?";
$.getJSON(flickerAPI, {
tags: "fart",
tag_mode: "any",
format: "json",
method:"flickr.photos.search",
api_key:"2bfe2a46e8884e2bcd7cb20be75b7db6",
extras:"url_m",
page: index,
per_page: num
})
.done(function (data) {
console.dir(data);
photos = data.photos.photo;
$.each(data.photos.photo, function (i, item) {
var flickrGallery = '<div class="item clearfix">';
flickrGallery += '<a class="image-link" href="' + item.url_m + '">';
flickrGallery += '<img src="' + item.url_m + '" alt="' + item.title + '" /></a><div class="item-meta">' + item.title + '</div></div>';
$('#container').append(flickrGallery);
});
});
}
loadFlickr();
$( ".load-more" ).click(function() {
loadFlickr();
});
My last post should do the trick for you - no need for extra points :)
ASKER
Wow, that was extremely generous of you! This is fantastic. Definitely does the trick. Thank you so much @tagit. I owe you one... ;)
No problem :) thats what we're here for. I still suggest you apply for your own api key as the one in the demo may expire at any time and/or be restricted somewhat.
ASKER
Already done! I'll replace the one you used with mine. Thanks again.