jQuery(function(){   
  jQuery("#gallery-litebox").flickr({     
    api_key: "your_api_key",     
    callback: liteboxCallback   
  }); 
}); 
function liteboxCallback(el){
  jQuery(el).litebox(yourSettingsObject);
}

api_key: null,      // [string]    
    required, see http://www.flickr.com/services/api/misc.api_keys.html
type: null,         // [string]    
    allowed values: ‘photoset’, ’search’, default: ‘flickr.photos.getRecent’
photoset_id: null,  // [string]    
    required, for type==’photoset’  
text: null,         // [string]    
    for type==’search’ free text search
user_id: null,      // [string]    
    for type==’search’ search by user id
group_id: null,     // [string]    
    for type==’search’ search by group id
tags: null,         // [string]    
    for type==’search’ comma separated list
tag_mode: ‘any’,    // [string]    
    for type==’search’ allowed values: ‘any’ (OR), ‘all’ (AND)
sort: ‘relevance’,  // [string]    
    for type==’search’ allowed values: ‘date-posted-asc’, ‘date-posted-desc’, 
    ‘date-taken-asc’, ‘date-taken-desc’, ‘interestingness-desc’, ‘interestingness-asc’, 
    ‘relevance’
thumb_size: ’s’,    // [string]    
    allowed values: ’s’ (75×75), ‘t’ (100x?), ‘m’ (240x?)
size: null,         // [string]    
    allowed values: ‘m’ (240x?), ‘b’ (1024x?), ‘o’ (original), default: (500x?)
per_page: 100,      // [integer]   
    allowed values: max of 500
page: 1,            // [integer]   
    see paging notes
attr: ”,           // [string]    
    optional, attributes applied to thumbnail <a> tag
api_url: null,      // [string]    
    optional, custom url that returns flickr JSON or JSON-P ‘photos’ or ‘photoset’
params: ”,         // [string]    
    optional, custom arguments, 
    see http://www.flickr.com/services/api/flickr.photos.search.html
api_callback: ‘?’,  // [string]    
    optional, custom callback in flickr JSON-P response
callback: null      // [function]  
    optional, callback function applied to entire %lt;ul%gt;

PAGING NOTES: jQuery Flickr plug-in does not provide paging functionality, but does provide 
hooks for a custom paging routine within the %lt;ul%gt; created by the plug-in, there are two 
hidden %lt;input%gt; tags, input:eq(0): current page, input:eq(1): total number of pages, 
input:eq(2): images per page, input:eq(3): total number of images

SEARCH NOTES: when setting type to ’search’ at least one search parameter  must also be 
passed text, user_id, group_id, or tags

SIZE NOTES: photos must allow viewing original size for size ‘o’ to function, if not, 
default size is shown

16 Comments on “jQuery Flickr”

1. Project Atomic » Blog Archive » jQuery Litebox Says:
   

   May 20th, 2008 at 10:25:00

   [...] Flickr support added by jQuery Flickr. Now you can add a rich AJAX experience to your website entirely with client-side [...]

2. seaofclouds Says:
   

   June 11th, 2008 at 12:12:21

   fantastic plugin. lots of great options. one question though - how can i change the default link from the static image, to the photo detail view on flickr?

3. Jean-Sien Kin Says:
   

   June 11th, 2008 at 09:55:46

   Hello, demo doesn’t work on my computer, it opens links in new pages (Mac OS 10.4.11 / Firefox 3 / Safari 3 / Javascript activated).

4. seaofclouds Says:
   

   June 11th, 2008 at 10:13:23

   thanks for this great plugin. after struggling with writing my own, i found this!

   curious though - how can i change the link on the thumbnail from the static image to the photo page on flickr?

5. Timothy Says:
   

   June 11th, 2008 at 11:28:07

   Hi there,

   Thanks for the great jQuery Flickr plugin.
   I’ve got it working which wasn’t very hard, thanks for that.

   I’ve got one question though, you are linking the direct image.
   Is there a way to link to the flickr page with the photostream on the right side?

   For example this page: http://www.flickr.com/photos/timsterrr/2562185934/

   Hope to hear from you.

   Thanks in advanced,
   Timothy

6. Daniel MacDonald Says:
   

   June 11th, 2008 at 02:04:14

   I am going to add the option to link to the Flickr page for the image instead of the actual image with the next update of the plug-in. In the meantime, the following line of code:

   var h = 'http://www.flickr.com/photos/' + photo['owner'] + ‘/’ + photo['id'];

   added right before:

   list.append('<li><a href="'+h+'" ...
   line 77 (uncompressed version)

   should link to the Flickr photo page (sorry, I haven’t extensively tested this hack, but it should work). It basically overrides the h variable set in the preceding lines of code (I should have implemented this approach from the start, since it is a little more straightforward).

   I appreciate the feedback, as I really don’t use Flickr myself. Stay tuned for an updated plug-in that incorporates this option.

7. Timothy Says:
   

   June 11th, 2008 at 11:47:04

   Thanks Daniel!
   It works great, thanks for the fast answer.

   Again, great work and thanks for that.

8. ND Says:
   

   June 19th, 2008 at 06:55:30

   Hello Daniel, Nice work!

   I was wondering why appending this line:
   var h = ‘http://www.flickr.com/photos/’ + photo['owner'] + ‘/’ + photo['id'];
   to the code, prior to list.append
   results in no image being displayed?

   are the indices “owner” and “id” already in photo[]?

   thank you.

9. ND Says:
   

   June 19th, 2008 at 07:00:35

   Nevermind there, the single quotations were the issue. Thanks again!

10. RJS Says:
    

    June 24th, 2008 at 02:56:34

    Hi
    I have the jQuery Flickr plugin working. It’s really great, thanks. I’m sorry I don’t understand how to get the jQuery Litebox element working with the Flickr plugin. Do you have an example of it working somewhere? I have Litebox working imdependently of the Flickr plugin.
    Thanks in advance. RJS

11. Chad Crowell Says:
    

    June 25th, 2008 at 04:24:10

    Hey I am using this script, and it works great, but even with the “o” original size attribute in the script, I am getting the 500px wide medium image. I have the originals set for availability.

    Here are the 3 images I am trying to get the originals of:
    http://flickr.com/photos/thecrowells/sets/72157605707038041/

    And here is my call for the script:
    //load the pictures from flickr
    $(”#home-pics”).flickr({
    api_key: “12345678901234567890″,
    type: “photoset”,
    photoset_id: “72157605707038041″,
    thumb_size: “s”,
    size: “o”,
    callback: runSlideshow
    });

    As I said its all working great but I can’t ge tthe originals. Help?

12. Daniel MacDonald Says:
    

    June 25th, 2008 at 10:16:18

    [RJS] I’m using the following code on my Litebox post (condensed for clarity):

    jQuery(function(){
      jQuery("#gallery-litebox").flickr({
        api_key: "your-api-key",
        callback: liteboxCallback
      });
    });
    function liteboxCallback(el){
      jQuery(el).litebox();
    }

    There was recently a pretty big change in the Flickr plug-in, native support for the Litebox plug-in was removed in favor of a more open callback method. Please make sure you have the latest version of the Flickr plug-in.

13. Daniel MacDonald Says:
    

    June 25th, 2008 at 10:25:11

    [Chad] I did a little investigating on Flickr, and it seems you need to have a Pro (paid) account in order to make original format images available.

    See: http://www.flickr.com/help/photos/?search=original+format#18

    I have modified the Flickr plug-in to at least show the largest size image if the original is not available. Please download the latest version of the plug-in for the update.

14. Chad Crowell Says:
    

    June 26th, 2008 at 10:29:08

    Thanks for the update Daniel - but I am a pro member and have been for years. I did have some security settings I think that were keeping the originals from being available to “everyone”. Thanks.

15. willwade Says:
    

    July 1st, 2008 at 07:03:56

    2 hacks for you. Randomise images and cutoff - that is only show a set number of images (works alongside randomise and per_page)
    1. add this to lines 30 & 31 of the code (part of the var s = { code
    
randomise: false, // [bool] optional, randomise the array of images (willwade at gmail.com)
cutoff: null // [integer] optional, set a cut off number.. use alongside per_page (willwade at gmail.com)

    2. add this to lines 51 & 52 (once the above is inputted)
    
if (s.randomise) { r.photos.photo.sort(function() {return 0.5 - Math.random()}); }
if (s.cutoff) { d = s.cutoff } else { d = r.photos.photo.length; }


16. Peter Says:
    

    July 2nd, 2008 at 08:14:08

    Has anyone had a stab at getting pagentation to work yet. Love this plugin and the would really complete it.

    Thanks in advance
    Pete

Leave a Comment