How to recreate our photo slideshows
A number of people have written or commented asking how to create the photo slideshows included at the end of our travel dispatches, so I thought I’d share it with everyone.
- Copy and paste the code below into your the html of your blog post or your site’s html (don’t paste it into your WYSIWYG editor).
- Replace the text SET-ID with your Flickr set’s number in both places. You can find the set number in the address bar of your browser when you’re looking at your Flickr set.
- OPTIONAL: Change the height and width of the slideshow – below at 500 pixels – to fit into the design of your site. Keep the height and width to the same ratio (1:1) so your photos don’t get squished.
This is just the way to duplicate the appearance of slideshows on Ephemerratic, which I based on code shared by web developer Paul Stamatiou. Check out Paul’s full instructions for more parameters to customize which photos are included in your slideshow. You can show all your photos or other Flickr users, base the selection on tags, and more (although unlike what Paul says, you CAN make the slideshow’s dimensions smaller, it’s just that the slideshow navigation gets cropped – see our 300 x 300 example below).
You can also change the layout of the slideshow – in the code below, we include instructions to center the slideshow, but you could align it to the left or right as well. Finally, Flickr has a different embeddable slideshow with a different style – here’s Flickr’s how to.
Slideshow Code
<p><iframe src="http://www.flickr.com/slideShow/index.gne?set_id=SET-ID" frameborder="0" height="500" scrolling="no" width="500"></iframe><br />If you can't see the photo slide show above, <a href="http://www.flickr.com/photos/girardin/sets/SET-ID/" target="_blank">view the photo set</a> on Flickr.</p>
Sample Slideshow
I’ve added some paragraph styling in my style sheet to make the text beneath the slideshow small and to center it all.
If you can’t see the photo slide show above, view the photo set on Flickr.
