Jquery flickr gallery?

OK folks I am just going to fire a question out into cyber space!

How can I display 3 random images with descriptions from a flickr account? I know there are galleries that can handle this but they seem to display one large image with small thumbnails at the bottom like this one for example Galleria

first you need an API key and your NSID.

Build a URL that looks something like this:

url = "http://api.flickr.com/services/rest/?format=json&nojsoncallback=1&extras=description&method=flickr.photos.search&user_id=" + NSID + "&api_key=" + yourApiKey;

There are lots of arguments you can put in there which you can read more about at: Flickr Services: Flickr API: flickr.photos.search

Now we grab a JSON object containing all the info about the photos requested:

$.getJSON(url, function (rsp) {....})

Inside the success function you build an image from the various bits and pieces that the JSON object contains, something like this (of course if you want to display more that 1 image you’ll have to put it in a loop):

//thumbnail url.notice that "m.jpg" is where you change the size of the image
            t_url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "m.jpg";
            //flickr url
            p_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
            //build image
            $img = '<div class="image"><div class="title">' + photo.title + '</div><a href="' + p_url + '">' + '<img alt="' + photo.title + '"src="' + t_url + '"/>' + '</a><div class="descr">' + photo.description._content + '</div></div>'
            //add image
            $("#images").append($img);

Full (messy) example at: Flickr API test

wow thanks for the speedy reply Dan! Thats perfect!

Would it be possible to add a link called “More” and when clicked it would refresh the random pictures without the browser doing a hard refresh?

I will upload what I am working with later I see you are from Surrey, so am I :slight_smile:

Wrap the whole $.getJSON(…) block in a function and add something to the start of that to clear the images box

$("#images").html("");

for example. Then call the function on page load and on button click. Example from before updated to show this.

A much better way to do it would be to cache the original JSON object and just pick another three photos from there, that would mean you’re only making one request to Flickr.

Surrey, woooo!:rofl:

Hi Dan, I don’t think I can see your changes on http://gupii.co.uk/tests/flickr/ ?

I am also wondering can flickr crop all images to the same dimensions?

Sorry, forgot to upload the page, done now!

I think the closest that Flickr gets to that kind of functionality is its little thumbnail view which is 75x75, you can get that by changing m.jpg to t.jpg.

You could emulate it with CSS overflow on the containers that the images are loaded in to

I added return false; after the moreBtn click loadImgs to stop the browser from jumping to the top if it is clicked after scrolling down the page and I removed javascript:void(0); on the href.

I changed “m.jpg” to “d.jpg” and am using overflow! Perfect solution thank you :slight_smile:

Is it possible to stop images from repeating?

hey I figured out how to remove any duplicates just add the following

//add image
$(“images”).append($img);

//remove duplicates
var map = {};
$(“#Flickr .box”).each(function(){
var value = $(this).text();
if (map[value] == null){
map[value] = true;
} else {
$(this).remove();
loadImgs().stop();
}
});