Flickrshow is a very simple Javascript slideshow for Flickr. It doesn’t require any web-development expertise, any particular Javascript frameworks, (although it works with all of them), or any hosted web space. It works in all modern web browsers, and Internet Explorer 6.
Please enable Javascript to view this slideshow.
Flickrshow can display the latest images uploaded to Flickr in less than 40 characters. To add a slideshow to your page just include the script itself and add the code shown in the example below. You can specify the element you wish to contain the slideshow by providing the element ID or the element as a Javascript object.
Example 1. Displaying recent images with Flickrshow
<div id="robin"> <p>Please enable Javascript to view this slideshow</p></div>...<script src="http://www.flickrshow.co.uk/static/scripts/flickrshow-7.2.min.js"></script><script> var robin = new flickrshow('robin');</script>In order to customise your slideshow to display your own images you must supply additional settings to the slideshow. The settings used in the slideshow above are shown in the example below.
Example 2. Supplying options to Flickrshow
<script> var robin = new flickrshow('robin', { autoplay:true, interval:5000, license:null, page:1, per_page:10, tags:'nikonfm2', user:'85173533@N00' });</script>Although Flickrshow does not require JQuery, if JQuery is detected Flickrshow will add a convenient wrapper function allowing you to use Flickrshow as you would any other JQuery plugin.
Example 3. Alternate usage of Flickrshow with jQuery.
<script> var robin = $('#robin').flickrshow({ autoplay:true, interval:5000, page:1, per_page:10, tags:'nikonfm2', user:'85173533@N00' });</script>The following are examples of using Flickrshow with different combinations of the available settings. These examples are good reference points if you are having trouble installing the script.
As shown in the example pages above, there are a large number of ways in which Flickrshow can be configured. The following table lists the settings that can be passed to Flickrshow, their default values and a brief description. All settings should be passed as shown in Example 2 above.
| Key | Default Value | Type | Description |
|---|---|---|---|
| autoplay | false | boolean | Plays the slideshow as soon as it has loaded all images. |
| gallery | string | The ID of the gallery you wish to display. You may need to use the Flickr API to retrieve this variable. | |
| group | string | The ID of the group you wish to display. You may need to use the Flickr API to retrieve this variable. | |
| hide_buttons | false | boolean | Prevent the button panel from displaying when you hover over or click on the slideshow. |
| interval | 3000 | integer | The number of milliseconds delay between moving the images when playing the slideshow. |
| license | "1,2,3,4,5,6,7" | string | A comma separated list of the allowable licenses within your slideshow. If set to null, no license restrictions will be set so please ensure you have permission to display the images. See the Flickr API for more information on license codes. |
| onLoad | function | A callback function triggered when the slideshow has loaded all images. | |
| onMove | function | A callback function triggered when the left or right buttons are pressed. Passes the IMG element currently being displayed as the first parameter. | |
| onPlay | function | A callback function triggered when the play button is pressed. | |
| onPause | function | A callback function triggered when the stop button is pressed. | |
| page | 1 | integer | The page of images you wish to display. See the Flickr API for more details. |
| person | string | The ID of the person you wish to display photos of. You may need to use the Flickr API to retrieve this variable. | |
| per_page | 50 | integer | The number of images you wish to display in the slideshow. The Flickr API maximum is 500 although a maximum of 100 is recommended. |
| set | string | The ID of the set you wish to display. You may need to use the Flickr API to retrieve this variable. | |
| tags | string | A comma-seperated list of tags you wish to search by. Can be used in conjunction with user. | |
| user | integer | The ID of the user whose photos you wish to display. Can be used in conjunction with tags. |
For advanced users of Flickrshow, when creating the slideshow the Flickrshow object will return the following public methods.
| Name | Description |
|---|---|
| play | The equivalent of pressing the play/pause button within the slideshow. Calling this method will toggle the play mode of the slideshow and call the 'onPlay' or 'onPause' callback. |
| left | The equivalent of pressing the left arrow button within the slideshow. Calling this method will move the slideshow one frame left and call the 'onMove' callback. |
| right | The equivalent of pressing the right arrow button within the slideshow. Calling this method will move the slideshow one frame right and call the 'onMove' callback. |
To include Flickrshow on your website, use the code below to include the latest stable version of the script.
<script src="http://www.flickrshow.co.uk/static/scripts/flickrshow-7.2.min.js"></script>If you do not wish us to host the Flickrshow script, the latest stable version can be downloaded and hosted on your own server. The latest development version of the script is also available from the GitHub repository in Coffeescript or as Coffeescript-generated Javascript.
Flickrshow is free to use for any commercial and non-commercial project. If you are using the script as part of a commercial project, it will get you great karma if you credit me as the original creator. If you plan on using Flickrshow for a high traffic project, you must contact me first so I can help you port the script and image files to your servers.
Flickrshow is free and produced by one person. As such, support is limited to any spare time outside of real, paying work. If you need help please get in touch with via Twitter.