Adding a Slideshow
Lightbox-style image display
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
#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
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
#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.