Warning: this article may contain information that is no longer correct!
What Is This?
Flickr is a photo-sharing web site. It can dynamically
generate interactive slideshows of groups of photos. Since Flickr slideshows
are generated by a script that simply accepts parameters specifying which photos
to present, it is possible to embed these slideshows in your own web pages. The
slideshow script and photos continue to reside on Flickr’s servers; an iframe
is used to display the slideshow interface on your own pages.
Sources
This technique is a direct variation of the method explained by Paul Stamatiou. The idGettr service is also helpful.
Implementation
Determining your User ID
First, use idGettr to look up your Flickr user ID. You
give idGettr the URL of your Flickr photo page, and it returns your user ID. For
instance, when I enter http://www.flickr.com/photos/anoved/
(anoved is my account name), it reports that my actual user ID is 93931947@N00.
Getting Started
The simplest scenario consists of an iframe with a src
URL that requests a slideshow of certain photos from Flickr. Your user ID is
given as a parameter. This code will result in a gallery of all your photos.
<iframe src="http://www.flickr.com/slideShow/index.gne?user_id=93931947@N00"
width="500" height="500">
</iframe>
Selecting Photos
If your photos are tagged,
you can add a tags parameter to the src URL. This will
cause only those photos with the given tags to be included in the slideshow.
Commas can be used to specify multiple tags. Here are some example slideshow
URLs that use tags to select particular photos from my collection:
http://www.flickr.com/slideShow/index.gne?user_id=93931947@N00&tags=drawing
http://www.flickr.com/slideShow/index.gne?user_id=93931947@N00&tags=flood,afton
http://www.flickr.com/slideShow/index.gne?user_id=93931947@N00&tags=flood,binghamton
Note that any ampersands present in the src URL should be
escaped as &, as seen in the following examples.
A Nicer Frame
Additional attributes for the iframe can be given to make it look and behave
a little bit nicer:
<iframe align="middle" name="slideshow" title="Flickr Flash Slideshow of Drawings"
src="http://www.flickr.com/slideShow/index.gne?user_id=93931947@N00&tags=drawing"
frameborder="0" scrolling="no" width="500" height="500">
</iframe>
Fallback Behavior
Code between the iframe tags will be ignored by browsers that support
iframes. Therefore, it will be rendered by older browsers that do not support
iframes. This can be used to display a conventional link to the photo gallery
so that users with older browsers can still get to the photos without difficulty:
<iframe align="middle" name="slideshow" title="Flickr Flash Slideshow of Drawings"
src="http://www.flickr.com/slideShow/index.gne?user_id=93931947@N00&tags=drawing"
frameborder="0" scrolling="no" width="500" height="500">
<p><a href="http://www.flickr.com/photos/anoved/sets/72057594129679654/">
<img src="images/faces.png" alt="Drawing gallery preview" width="315" height="315" /></a></p>
</iframe>
XHTML Doctypes
Most anovednet pages use XHTML 1.0 Strict,
but iframe is not part of XHTML strict, so on pages that contain embedded slideshows
I use the XHTML 1.0 Transitional doctype instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Compatibility
This method has been tested and found to work in Safari 2.0.4 (Mac), Firefox 2.0 RC3 (Mac), and Internet Explorer 6.0.2800.1106 (PC). It does not appear to work with Opera 9.0 (Mac).