Jun 6, 2012

Get Flickr Galleries from URLs with jQuery

I find that I sometimes want to embed a set of images that someone hasn't created a gallery for. You can actually see a slide show of them (example: jQuery Bowling Awesomeness!) but there isn't a way to embed/share that view.. until now. I've created a quick little plugin that grabs the set id and username from a url and then creates the slideshow that gets embedded.

Optional Settings

Example

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

Code

&#x2F;**
 * Flickr Gallery 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.flickrGallery = function(options){
        return this.each(function(){
            var settings = $.extend({
                    url : &#39;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;natecroft&#x2F;sets&#x2F;72157629865265552&#x2F;show&#x2F;&#39;,
                    height : 350,
                    width : 350
                }, options),
                id,
                encoded;
            id = settings.url.match(&#x2F;\&#x2F;sets\&#x2F;(.*)&#x2F;)[1].split(&#39;&#x2F;&#39;)[0],
            encoded = encodeURIComponent(settings.url.match(&#x2F;\&#x2F;photos\&#x2F;(.*)&#x2F;)[0]);
            $(this).append(&#39;&amp;lt;embed src=&quot;http:&#x2F;&#x2F;widgets.vodpod.com&#x2F;w&#x2F;video_embed&#x2F;Groupvideo.1493771&quot; type=&quot;application&#x2F;x-shockwave-flash&quot; allowscriptaccess=&quot;sameDomain&quot; pluginspage=&quot;http:&#x2F;&#x2F;www.macromedia.com&#x2F;go&#x2F;getflashplayer&quot; wmode=&quot;transparent&quot; flashvars=&quot;&amp;amp;offsite=true&amp;amp;intl_lang=en-us&amp;amp;page_show_url=&#39;+encoded+&#39;&amp;amp;set_id=&#39;+id+&#39;&amp;amp;jump_to=&quot; width=&quot;&#39;+settings.width+&#39;&quot; height=&quot;&#39;+settings.height+&#39;&quot;&amp;gt;&#39;);
        });
    };
})(jQuery);

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