How to embed Flickr slideshows and add Shadow box for added awesomeness

If you want to add a really cool slideshow to your website like the one below, just follow these steps:

To be able to use Shadowbox you will need to install it on your blog or website. You can also use Lightbox to have the same effect, but I will be covering Shadowbox here b/c I use it on my site and I like it better. If you use WordPress, Drupal, or some other CMS/blogging platform you should check and see if there is a plugin. I'm using the Drupal Shadowbox plugin but there is also a Lightbox plugin as well. You can get Shadowbox for WordPress here.

Ok after you get Shadowbox installed...

1. Setup the slideshow thumbnail

Get the URL of the image that you want to use as your thumbnail.

You can use any image or even just text.

Insert the image into your post, I usually just use whatever image button you happen to have on your WYSIWYG editor and past in the URL.

2. Copy the URL for the Slideshow

Find the Slideshow icon and copy the slideshow link

20090123-tmnx59md2pak4np933iai6pi2x.preview.jpg

3. Setup the link with Shadowbox

Click on the thumbnail image and link it to the Slideshow URL. Then switch to code view and add the following code (bolded)

<a href="http://throk.com/%3Cem%3ESLIDESHOW-URL%3C/em%3E" title="this is where you can put the title" target="_blank" rel="shadowbox;width=700;height=525">
<img src="http://throk.com/%3Cem%3ETHUMBNAIL-URL%3C/em%3E"/>
<br /> click to view</a>

And That's it! Let me know if this helps you out!

 

Comments

Design Eleven's picture

Regarding Flickr and Shadowbox.js, I'll take you up on your invitation to let you know if it helps. I'm a designer, not a developer and I think I've gotten myself in way over my head here. And no one on the Shadowbox.js user forum has any helpful hint to offer.

This is the web address I'm having problems with: http://heller.brandeis.edu/sid/dev/media/index.html

I'm trying to link a Flickr slideshow
(located at http://www.flickr.com/photos/38915919@N05/sets/72157619012969577/show/) with Shadowbox.

As you see, it starts to work, but then doesn't display the Flickr address specified in the link. (IE7 gives me the error message "Exception thrown and not caught" and Firefox warns "uncaught exception: Unknown player: iframe". I'm a front-end guy, a designer not technically savvy enough to know whether or not that's the problem, or part of it. Or what to do about it.)

If you can help, you'lll be my hero forever.