OKAY! I promise, this is the last flickr related post (Flickr Video Plugin, Flickr Gallery Plugin. I really should just write an all out complete flickr plugin for all your photo, video and gallery needs o_O. Maybe. One day. For now, I’ve delved back in and created the last “Get Flickr X from URL”. And, X happens to be “Photos”.

Note: You will need an flickr API key and secret to use this plugin. You can get an API key by logging into your Yahoo/flickr account and heading here: http://www.flickr.com/services/api/keys/. More information on the flickr API can be found here: http://www.flickr.com/services/api/

Optional Settings

  • url (string Default: '')
    Is the flickr url of the video you’d like to display
  • key (string Default: '')
    The API key , provided by flickr, to use with the API
  • secret (string Default: '')
    The API secret, provided by flickr, to use with the API

Example

Fork this Fiddle

Code

/**
 * Flickr Photo Plugin
 * @author Darcy Clarke
 *
 * Copyright (c) 2012 Darcy Clarke
 * Dual licensed under the MIT and GPL licenses.
 * http://darcyclarke.me/
 */

(function($){
    $.fn.flickrPhoto = function(options){
        var settings = $.extend({
            url : '',
            key : '',
            secret : ''
            }, options),
            id,
            method = 'flickr.photos.getInfo',
            format = 'json',
            collection = this;
        id = settings.url.match(/\/photos\/(.*)/)[1].split('/')[1];
        $.ajax({
            url: 'http://www.flickr.com/services/rest/?method='+method+'&format='+format+'&api_key='+settings.key,
            dataType: 'jsonp',
            data: {'photo_id':id},
            type: 'GET',
            jsonpCallback: 'jsonFlickrApi',
            success: function(data){
                collection.each(function(){
                    $(this).append('<img src="http://farm'+data.photo.farm+'.static.flickr.com/'+data.photo.server+'/'+id+'_'+data.photo.secret+'.jpg">');
                });
            }
        });
        return collection;
    };
})(jQuery);

Github: jQuery Photo Gallery Plugin
Suggestions, problems, feedback?
Check Out the Repo

0 Comments

Leave a Reply: