Installing Flickrshow

How do I include a Flickrshow on my website?

Flickrshow can be installed on your site in just a few lines of Javascript. First, include the latest version of the script in your HTML page.

  1. <script type="text/javascript" src="http://v6.flickrshow.com/scripts/"></script>

Then insert your slideshow by creating the Flickrshow object and telling it where and what to display.

  1. <div id="fsDemo" style="height:600px;width:400px;">
  2. <p>Flickrshow will appear here!</p>
  3. </div>
  4. <script type="text/javascript">
  5. var cesc = new flickrshow("fsDemo", {flickr_photoset: "72157603667639603@N00"});
  6. </script>

Do I need anything else to run Flickrshow?

The script requires Prototype 1.6 and a small portion of the Scriptaculous library, both of which are bundled in compressed form within the above script. If your website already uses these libraries, Flickrshow can be added without them:

  1. <script ... src="http://v6.flickrshow.com/scripts/wout/"></script>

Getting images from Flickr

What images can I display with Flickrshow?

Flickrshow can be used to display images from Flickr Groups, Flickr Photosets and using the tags applied to images. It can also be used to display the last twenty images from a user’s photostream.

How do I tell Flickrshow what to retrieve?

To tell Flickrshow what images you want it to display, you must include one of the following variables when you create your slideshow:

Is that it?

No! You can also combine the flickr_tags and flickr_user variables to perform a tag based search on one users photostream. The example below retrieves all images with the tag ‘macro’ from the user beseku’s photostream.

  1. var ade = new flickrshow("fsDemo", {flickr_tags: "macro", flickr_user: "beseku"});

For the professionals

How do I change Flickrshows appearance?

Flickrshow comes with four simple themes: blue, green, grey and pink. These provide you with a simple way of changing the slideshow to more closely match your website. You can modify the theme using the following variable:

  1. var hleb = new flickrshow("fsDemo", new flickrshow("fsDemo", {flickr_group: "63464705@N00", theme: "blue"});

I don’t like those colours. How do I style it myself?

It’s easy to make Flickrshow look even more like your website if you know your CSS onions. Simply tell Flickrshow not to load a theme itself and then apply styles to the slideshow within your own stylesheet. The green theme can be used as a starting point if you need it.

  1. var kolo = new flickrshow("fsDemo", new flickrshow("fsDemo", {flickr_group: "63464705@N00", theme:"none"});

How do I change the size of the images in Flickrshow?

If your slideshow is very big or very small, you might like to include different sized images within your slideshow. This is achieved using the following variable, which corresponds to Flickr’s own sizing scheme:

  1. var robin = new flickrshow("fsDemo", new flickrshow("fsDemo", {flickr_user: "beseku", size:"_m"});

It is worth noting that many Flickr users only upload smaller sized images to protect themselves against theft or piracy. If images are not appearing, (with a placeholder image) this is usually the cause.

How do I change the speed of the slideshow?

If your slideshow is going to quickly or too slowly, you can change the number of seconds between slides using the following variable:

  1. var robin = new flickrshow("fsDemo", new flickrshow("fsDemo", {flickr_user: "beseku", speed:2});

It’s not loading. How do I know whats wrong?

Flickrshow contains a simple debug mode that helps you find out what is going wrong. Enabling it will make Flickrshow display error messages, so make sure you don’t leave it on to bother you visitors.

  1. var mathieu = new flickrshow("fsDemo", new flickrshow("fsDemo", {flickr_group: "63464705@N00", debug:1});