simplFlickrSlidr : client friendly NivoSlider without a CMS

(well, not really, it's all controlled by Flickr. Your client knows how to use that, right?)

» What is simplFlickrSlidr?

This plugin is a tool which writes the markup for a nivoSlider based on the contents of a Flickr photoset or gallery. All you supply is your Flickr API key and the ID of the photoset or gallery (and optionally choose which method you're using) and let the plugin take over.

A friend of mine needed to create a slider for a client's website which they could control without having to create an unnecessary CMS. He also couldn't find a decent plugin which wasn't bloated with silly features.

I love the nivoSlider, it's lightweight and has a handful of elegant features, it's also massively customisable. I figured, why re-invent the wheel but instead build something which generates the HTML based on a dynamic feed. Et Voila.

» How do I use it?

Include the source files into your head (remembering to include the nivoSlider plugin) then call the simplFlickrSlidr() method on the container object you want to turn into a beautiful slider.

<!-- Load CSS -->
<link rel="stylesheet" type="text/css" media="all" href="nivo-slider.css" />
<link rel="stylesheet" type="text/css" media="all" href="nivo-default-theme.css" />

<!-- Load JS -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.simplFlickrSlidr.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>

<!-- Initialise simplFlickrSlidr -->
<script type="text/javascript">
  $(function() {
    $( '#simplFlickrSlidr' ).simplFlickrSlidr();
<div id="simplFlickrSlidr"></div>

» What options are available?

simplFlickrSlidr was built with simplicity in mind, hence you can't do very much. Below are the customisable options available to you, pass them in as an object in the first parameter:

Option Default Notes
object_id no default, required The ID of the object (gallery or photoset) to look up.
api_key no default, required Your Flickr API key
src The source of the Flickr API (in case they change it)
method flickr.photosets.getPhotos The Flickr API method to use, only two are supported (the other being flickr.galleries.getPhotos)

You can also pass an object as the second parameter to set the settings of the nivoSlider.

» How do I get it?

Download the latest stable release from GitHub

» I want to extend it

Fork the project on GitHub and send me a pull request.

» Change Log


While I'm not actively developing this plugin here are a few things which I would like to see implemented into it one day. Maybe I'll do it if I ever have time.

If you'd like to contribute then please send me a pull request on GitHub.

  1. Improve the logic of choosing and fetching photos from the Flickr API
  2. Add support for other slider libraries
  3. Dynamically load the required assets for the slider