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.
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.
<div id="robin">
<p>Please enable Javascript to view this slideshow</p>
</div>
...
<script src="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.
<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.
<script>
var robin = $('#robin').flickrshow({
autoplay:true,
interval:5000,
page:1,
per_page:10,
tags:'nikonfm2',
user:'85173533@N00'
});
</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. |
Flickrshow is no longer being developed and so support is no longer available. Flickrshow is licenced under the GNU licence as included in the Github repository.