flickr group viewer
  • After a fair bit of trial and error I've created a pretty simple to use script to make a gallery out of photos pulled in from a flickr group pool. The pretty photo script will show the title using the title from the description on flickr. The pretty photo slideshow image description will show a clickable link to the image page on flickr as per the flickr API rules.

    To use replace the ALLCAPS variables with your own. Get your flickr API here at http://www.flickr.com/services/api/misc.api_keys.html

    Enjoy.

    HTML:
    <div id="gallery">

    <p id="nojs">JavaScript is needed to use this gallery. <a href="http://www.flickr.com/groups/GROUPNAME/">See the Flickr group</a>.</p>

    </div>


    JavaScript:
    function flickrURLbuild(farm, server, id, secret, size) {
    // builds a URL to a flickr image in the format
    // http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstzb].jpg
    return 'http://farm'
    + farm
    + '.static.flickr.com/' + server
    + '/' + id
    + '_' + secret
    + '_' + size
    + '.jpg';
    }

    function flickrPagebuild(userid, photoid) {
    // builds a URL to a flickr image profile in the format
    // http://www.flickr.com/photos/{user-id}/{photo-id}
    return 'www.flickr.com/photos/'
    + userid
    + '/' + photoid;
    }


    $(function() {
    var output = $('<ul class="photos">').appendTo('#gallery');
    var ifo = {
    api : 'YOURAPIKEY', // flickr api
    gid : 'YOURGROUPID', // group id
    fLink : 'http://www.flickr.com/photos/user/',
    maxphts : 21
    };
    var api_images = [],
    api_titles = [],
    api_descriptions = [];

    // Initialise prettyPhoto
    $.fn.prettyPhoto({
    animation_speed: 'fast',
    slideshow: 10000,
    show_title: true,
    theme: 'dark_square',
    autoplay:true
    });

    // Show loading
    $('#nojs').addClass('refresh loading'); // hook up to some CSS

    $.getJSON('http://api.flickr.com/services/rest/?method=flickr.groups.pools.getPhotos&format=json&api_key=' + ifo.api + '&group_id=' + ifo.gid + '&jsoncallback=?', function(data) {
    if (data.stat == 'ok') {
    $.each(data.photos.photo, function(i) {
    var photo = data.photos.photo[i],
    thumbnail = flickrURLbuild(photo.farm, photo.server, photo.id, photo.secret, 's'),
    display = flickrURLbuild(photo.farm, photo.server, photo.id, photo.secret, 'z'),
    href = 'http://' + flickrPagebuild(photo.owner, photo.id),
    item = $('<li/>');

    api_images.push(display);
    api_titles.push(photo.title);
    api_descriptions.push('<a href="' + href + '">View on Flickr</a>');
    var link = $('<a/>')
    .attr('href', href)
    .attr('title', photo.title)
    .attr('rel', 'prettyPhoto[XXX]');
    link.appendTo(item);
    link.click(function() {
    $.prettyPhoto.open(api_images, api_titles, api_descriptions);
    $.prettyPhoto.changePage(i);
    return false;
    });
    $('<img/>')
    .attr('src', thumbnail)
    .attr('alt', photo.title)
    .attr('width', '75')
    .attr('height', '75')
    .appendTo(link);
    item.appendTo(output);
    });
    $('#nojs').remove();
    }
    });
    });
  • Thanks for the script.

    I'm pretty sure someone could use it.
  • How do you implement this with the existing PrettyPhoto?

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter