SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Surrey, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    first you need an API key and your NSID.

    Build a URL that looks something like this:

    Code:
    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:

    Code:
    $.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):

    Code:
    //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

  3. #3
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Surrey, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wrap the whole $.getJSON(...) block in a function and add something to the start of that to clear the images box

    Code:
    $("#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!

  5. #5
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Surrey, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Is it possible to stop images from repeating?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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();
    }
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •