Easy to use and flexible Flickr gallery

  • No server-side

    No need for server-side image fetching - user's browser requests images from Flickr by itself

  • Easy setup

    Paste small HTML snippet and you're ready to go. No JavaScript knowledge required!

  • Bootstrap compatible

    The script comes prepared for implementation in Bootstrap based websites or applications

  • Pagination included

    Paginate your results using manual or automatic pagination controls

  • Highly customizable

    Multiple options allow easy and complex gallery customization


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.


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:


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


  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



Attributes that can be attached to gallery placeholder. All attributes attached to tag have higher priority than plugin options

Name Description
data-tags Tags separated by spaces which filter images fetched from Flickr. This attribute is mandatory when using automatic requests without providing any set ID. When set ID is present, this one becomes obsolete
data-user-id User ID from whom data should be fetched. Optional
data-per-page How many photos should be displayed per page
data-set-id Set ID from which we want to fetch photos. Important - this one will nullify the effect of tags and user_id entries


Small set of methods accessible through gallery plugin instance

Name Params Returns Description
createGallery page : Integer Plugin Creates gallery in container. Called every time when new gallery instance is created. Only appends photos list to container, doesn't deploy pagination nor modal window
clearGallery - Plugin Hide photos and remove them. If loader is true then displays loader
isLastPage - boolean Check if current page is the last page of the gallery
nextPage - Plugin / boolean Display next page of the gallery. Returns false if current page is the last one
prevPage - Plugin / boolean Display previous page of the gallery. Returns false if current page is the first one
prevImage - Plugin / boolean Diplay previous gallery image in modal window. Available only if modal window is enabled
nextImage - Plugin / boolean Diplay next gallery image in modal window. Available only if modal window is enabled, else returns false


Options passed as argument when manually creating an instance of gallery

Name Type Default Description
fetchImages boolean true Determines whether photos should be fetched from Flickr
animation string "fade" Gallery toggle animation type. Available values: 'fade', 'show'. Set false to disable
animationSpeed number 250 Entry animation speed in miliseconds
preload object - Modal window preload control mechanism. Set false to disable
range number 2 How many photos should be preloaded
structure object - Structure settings
.ulClass string "thumbnails" Class attached to unordered list element. Mandatory
.liClass string "span1" Class attached to list item elements. Mandatory
.aClass string "thumbnail" Class attached to anchor elements. Mandatory
modal object - Modal window settings. False to disable modal display
generate boolean true Should modal markup be generated
id string "jsfg-modal" Modal container id
title string ".modal-header h3" Title selector
imageContainerClass string ".modal-image" Modal's image container in which images are placed
onContainerNext boolean true Switch to next image on image container click
imageFadeTime number 250 Image fade in time
prevClass string ".btn.modal-prev" Previous button class selector. Always selected in context of the modal window
nextClass string ".btn.modal-next" Next button class selector. Always selected in context of the modal window
prevText string "Previous image" Previous button title. Attached only when modal is generated
nextText string "Previous image" Next button title. Attached only when modal is generated
offsetWidth number 100 Modal horizontal offset used in image scaling
offsetHeight number 200 Modal vertical offset used in image scaling
pagination object - Pagination settings. False to disable pagination
generate boolean true Should pagination be generated automatically
containerClass string ".pagination" Class added to pagination container when it's generated
prevClass string ".btn.pagination-prev" Previous page button class selector. When pagination is generated - it's used in pagination container scope - else in document scope
nextClass string ".btn.pagination-next" Next page button class selector. When pagination is generated - it's used in pagination container scope - else in document scope
prevText string "Previous page" Previous page button title if it's generated
nextText string "Next page" Next page button title if it's generated
loader object - Loader settings. False to disable loader
animation boolean true Toggle loader animation
loaderClass string ".jsfg-loader" Class attached to loader tag and used to select it (mandatory)
text string "Loading" Loader static body string
interval number 200 Loader animation interval
mark string "." String that'll be attached as suffix of loader body string on each interval
markClass string ".animation-marks" Class attached to animation marks tag and used to select it (mandatory)
maxMarks number 3 Maximum number of displayed marks
url object - Url parameters that are sent to Flickr servers
per_page number 30 Photos fetched per request
tagmode string "all" Photo selection tagmode. Available values: "any" and "all"
user_id string null Allows to fetch photos that belong only to certain user
tags string null Photo tags separated by whitespace. Mandatory if creating manual gallery instance without defining any tags in gallery container
error object - Displayed error settigns
text string "No photos found" String displayed when no photos were found
tagClass string "error" Class added to error span tag
imageSizes object - Contains overridable images sizes. Available values: small (up to 75 x 75), medium (up to 100 x 75), medium (up to 150 x 150), medium (up to 620 x 640), large (up to 1024 in any of two dimensions), original (original image size)
thumbnailSize string imageSizes["medium"] Thumbnail size
imageSize string imageSizes["large"] Target image size that'll be displayed in modal or new tab
apiUrl string http://api.flickr.com/services/rest/?jsoncallback=? Flickr API url