jQuery plugin for Flickr's group

18 Jan 2011

A few days ago, I was contacted on GitHub by zumajoe. He want to use my jQuery Flickr plugin to browse group instead of set, and ask me to help him.

This is a quick update to do that:

(function($) {
 
    var api_url = 'http://api.flickr.com/services/rest/';
 
    var options = {};
    var default_options = {
        group_id: null,
        api_key: null,
        size: 'normal',
        speed: 100,
        count: false
    };
 
    var root;
    var lightbox = [];
 
    $.fn.flickr = function(user_options) {
        root = $(this);
        if (!user_options) user_options = {};
        $.each(default_options, function(key, default_value) {
            options[key] = user_options[key] || default_value;
        });
        flickr_init();
    }
 
    flickr_init = function() {
        flickr_request('flickr.groups.pools.getPhotos', {group_id: options.group_id});
    }
 
    flickr_group = function(photos) {
        var element = $('<ul></ul>', {id: 'flickr'});
        root.append(element);
 
        var size = '_m';
        switch (options.size) {
            case 'small':
                size = '_s';
                break;
            case 'large':
                size = '';
                break;
        }
 
        $.each(photos.photo, function(key, photo) {
            if (!options.count || key < options.count) {
                var thumbnail = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + size + '.jpg';
                var large = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '.jpg';
                var title = photo.title;
                element.append($('<li></li>')
                    .append($('<a></a>', {id: photo.id, title: title, href: large})
                        .css({background: 'url(' + thumbnail + ') no-repeat center center'})
                        .addClass(options.size)
                        .append($('<span></span>').text(title))
                    ).hide()
                    .append($('<img></img>', {src: thumbnail}).hide())
                );
            }
        });
        flickr_lightbox();
        flickr_preload();
    }
 
    flickr_lightbox = function(id) {
        $('#flickr a').fancybox();
    }
 
    flickr_animate = function() { 
        $('#flickr li:hidden:first').fadeIn(options.speed, flickr_animate);
    }
 
    flickr_preload = function() {
        var images = $('#flickr li img');
        var count = images.length;
        images.one('load', function() {
            count--;
            if (count == 0) {
                flickr_animate();
            }
        }).each(function(){
            if (this.complete)  $(this).trigger("load");
        });
    }
 
    flickr_request = function(method, data) {
        var url = api_url + "?format=json&method=" + method + "&api_key=" + options.api_key;
        $.each(data, function(key, value) {
            url += "&" + key + "=" + value;
        });
        $.getScript(url);
    }
 
})(jQuery);
 
function jsonFlickrApi(rsp){
    if (rsp.stat != "ok") {
        return;
    }
 
    if (rsp.photos) flickr_group(rsp.photos);
}