Jun 6, 2012

Get Flickr Photos from URLs with jQuery

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

Example

<div class="wrap"><iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/darcyclarke/Fg9Ah/14/embedded/result" allowfullscreen="allowfullscreen" frameborder="0"></iframe><span>Fork this Fiddle</span></div>

Code

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

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

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