flickrGallery is an open-source photo gallery for jQuery that allows you to dynamically pull images from a photoset in
Flickr.
The main functionalities of this gallery are a) to pull in images dynamically from a Flickr photoset, b) to dynamically grow or shrink the gallery area, depending on the size of the images and c) to offer a lightbox effect for small images. However, all of these functionalities can be turned off. If Flickr is turned off, a standard unordered-list with images can be provided to use just the photo gallery functionality.
The purpose of this plugin is to allow for a dynamic image gallery that is easy to add or remove images from. Once the gallery is added to a website, the code doesn't need to be changed again to update images. Everything, including image captions, is updated from Flickr.
Demo: * Note: The lightbox effect doesn't take up full screen, because the Demo is in an iFrame on this page. Click on one of the demo links below for the full effect.
REQUIREMENTS:
OPTIONAL (but recommended): hoverIntent jQuery plugin by Brian Cherne
jQuery Lightbox plugin by Leandro Vieira Pinho
Download Entire Package
DEMOS:
IMPLEMENTATION:
Implementing the flickrGallery is fairly easy.
1) Unzip the files in the Entire Package file to your server.
2) Link to the CSS and Javascript files.
3) Add the javascript source to initialize the gallery, with options.
Source used in this example:
$().ready(function(){
$('#flickrTest').photoGal({
useFlickr: 'true',
flickrAPIKey: 'yourFlickrAPIKey',
photosetID: 'yourPhotosetID',
useHoverIntent: 'true',
useLightBox: 'true'
});
});
The following options are available:
galleryHeight: either [string] 'auto' or [integer]. If [integer] gallery will have a strict height to that number.
userFlickr: [string], 'true' or 'false'. Determines if gallery is local or flickr based. Defaults to false.
useFlickrLargeSize: [string], 'true' or 'false'. Determines whether gallery is Large or Small. Defaults to false.
flickrAPIKey: [string], required for Flickr gallery.
photosetID: [string], required for Flickr gallery.
per_page: [integer], amount of thumbnails per 'page'. Defaults to 30.
useHoverIntent: [string], 'true' or 'false'. Uses HoverIntent plugin for better Hovers. Defaults to false.
useLightBox: [string], 'true' or 'false. Uses jQuery Lightbox plugin for Small size images. Defaults to false.
Please post any bugs/suggestions in the comments section of this post. Check back for future updates.
*Planned Updates: Improve animation for next/prev page, particularly in large mode. New skins.
