Adding a Slideshow

If you have a series of images, you can either display them in a Lightbox format or a slideshow format

In the lightbox format, you have a thumbnail that displays the image in a large overlay when clicked. You can see examples of this in our photo galleries. We use Fancybox, a lightbox alternative, to accomplish this.

To create a Fancybox gallery, you’ll need image thumbnails wrapped in A tags that link to the full-size images. To group them into a gallery, give the A tags a common rel attribute. If you have the photos set up as a set in the EMU flickr account, you can use a little code snippet to generate the necessary thumbnails and links:


<ul id="slideshow">
<r:flickr:photos set="72157623335632990">
  <li><a rel="set1" href="<r:photo:src size="large"/>" title="<r:escape_html><r:photo:title /><small><r:photo:description /></small></r:escape_html>"><img src="<r:photo:src size="square"/>" alt="<r:escape_html><r:photo:title /></r:escape_html>" /></a></li>
</r:flickr:photos>
</ul>

Be sure to change the set number. Then create a fancybox page part, set the filter to none and add the bit of Javascript that initializes the fancybox:

$('#slideshow a').fancybox();

…where #slideshow a is the CSS selector for all the A tags you want the fancybox to apply to. You can pass a hash of options to the fancybox() function.

Slideshow-style image display

If you just want a series of images displayed in one place with a fade transition between them, you can use the Cycle plugin.

To create a slideshow with Cycle, just put all your images in a common container (like a div), add a cycle page part, set its filter to none, and add the initialization Javascript:

$('#slideshow').cycle();

…where #slideshow is the CSS selector for the container. The cycle() function accepts a hash of options

Not just for images!

Fancybox and Cycle aren’t restricted to images. They can handle other kinds of content as well. See their respective documentation for how to use them on divs, videos, etc.

Next: Server Architecture »