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

  • url (string Default: *Awesome jQuery Bowling Pics*)
    Is the flickr url of the set you’d like to display
  • height (number in px Default: 350)
    Is height of the gallery
  • width (number in px Default: 350)
    Is width of the gallery

Example

Fork this Fiddle

Code

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

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

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

1 Comments

Melinda Hileman Posted: Sep 10, 2012 @ 8:56pm

I just tried this, and nothing happens…

Leave a Reply: