Easy to use and flexible Flickr gallery

About

JsFlickrGallery is a Flickr based gallery plugin for jQuery (1.7+) that doesn't require any server-side image fetching mechanisms due to JSONP usage. It features easy implementation and provides wide set of options for advanced customization, including automatic modal and pagination deployment.

JsFlickrGallery was created by Peter Jankowski (wow, me). I'm reachable through likeadev.com, my GitHub or my Twitter.

Usage

Basic usage is really simple. Just follow these steps:

1. First, download, or pull JsFlickrGallery from GitHub,
2. download jQuery version 1.7 or higher,
3. Boostrap Twitter modal is required, so you'll either need to fetch whole Bootstrap package or only the modal module under this address,
4. transition detection for $.support is also required. Best choice would be Bootstrap Transitions,
5. move and eventually extract fetched content - jQuery script, Bootstrap CSS and script, JsFlickrGallery script and CSS (optional) - to your project folder,

6. add following code to your head section:

   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/bootstrap.js"></script>
   <script type="text/javascript" src="js/js-flickr-gallery.js"></script>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

7. you can also add optional JsFlickrGallery styles to make your gallery look more tasty (strongly suggested):

   <link rel="stylesheet" type="text/css" href="css/js-flickr-gallery.css"/>

And that's it. Now if you'll put following snippet in your code:

<div data-toggle="jsfg" data-tags="dogs" data-per-page="10"></div>

JsFlickrGallery will create (automatically, once document is ready) a gallery inside this div that'll contain 10 photos per page with tag "dogs", fetched from public stack. This way you can create multiple galleries with different tags, size (still, remember about Flickr APIs Terms of Use) and even target certain user. Works only for DOM elements with data-toggle="jsfg" attribute.

You can also deploy galleries manually, eg. for <div id="gallery"> use code:

$("#gallery").jsFlickrGallery(options)

Argument options is an object that contains plugin configuration parameters. See the documentation for more details.

Examples

1. Single gallery
2. Multiple galleries with styles
3. Gallery with custom modal window
4. Alternative effects and loader
5. Gallery Without Fetching Photos From Flickr
6. Gallery From Photo Set

Documentation