Search
RSS & Email Feeds - The Easy Way To Keep Up To Date With The Blog

 

Tech Podcast Network
« Ten Boring, But Effective Plug-Ins For Your Self-Hosted Wordpress Blog | Main | SCL Photo Podcast 57 - Use That On-Camera Flash! »
Tuesday
Aug112009

Adding A Full Screen Flickr Slideshow Gallery To Your Photography Blog Or Website

As I mentioned last week, I've never been happy with the way I've shared my images on this site, but with Flickr's slideshow widget I've got something that I think is actually quite good - check out my gallery to have a look.


What's great about using a Flickr full-screen slide show for your gallery is that all you need is a Flickr account, and the code will work on Wordpress, Blogger and any other type of website. Here's what you do:

First up, it may be worth creating a new "Set" of images in your Flickr account that will feed into your slide-show, so that you're sharing your best photographs. Simply sign into your Flickr account, select a photo, then above the photo click "Add To Set", then "Create A New Set":

flickr_slideshow_1


Then just go through your photostream and add the photo's that you want in your slideshow gallery to this set. If you're using a free Flickr account and have used up your free sets, you could use your whole photostream to drive the gallery.

Once you're happy with the photographs in your set we need to go and get the html code for our new slideshow.

Go to one of the photographs in the set, and look for the name of the set on the right side of the screen, and click on it:

flickr_slideshow_2


You should find yourself in the thumbnail view of this new set:

flickr_slideshow_3


Click on the "Slideshow" icon in the top right hand of the screen, and Flickr will launch the slide-show. Waggle your mouse around, then click on the "Share" link in the top right-hand corner, then the ""Customize This HTML" link:

flickr_slideshow_4


You'll then be directed to the next screen where you can customize the size of your slideshow. "Medium" is a good width for most photo blogs and websites, so click on that, then highlight the code in the text box, right-click and "copy":

flickr_slideshow_5


Keep the window open that's got the HTML code for your slideshow in it, then we need to open the editor your use to add pages or posts to your Blog or Website. If you're using a static site (non cms) that you edit locally, say on Dreamweaver or Frontpage, open those programs, create a new page from your template, switch to the HTML editor, and simply "Paste" the code for the slideshow into the page, then upload it to your server.

If you're using a Content Management System, such as Wordpress or Blogger, log into your admin page and create a new post or page, which will become your slide-show gallery.

In Wordpress make sure you're using the basic text editor (which allows insertion of HTML), then simply paste the Gallery HTML into your post or page:

flickr_slideshow_6


If you preview the post or page, and seem to have trouble with text wrapping round the slideshow box, add this code snippet right after the code for the slideshow:

<div style="clear:both;"></div>

If you're using a Blogger site, just add a new post, click on the "Edit HTML" tab, then paste the slideshow HTML into the box. (It might be a good idea to also add the above code after the slide-show HTML):

flickr_slideshow_7


So, there we go, you should now have embedded into a post or page on your Photo Website or Blog, a great looking full-screen Flickr slideshow. (Your visitors simply click the play icon and the the "Full-Screen" box). All you've got to do is just keep adding pictures to your Flickr slideshow set, and your gallery will be continually expanded and updated.

Cool, easy, and best of all, free!

Cheers, Rob.

Reader Comments (5)

Has anyone had a problem with this feed using 64bit Internet Explorer ? 32 bit is fine but not with the 64bit ?????? Heeeeeeeelp !

May 27, 2010 | Unregistered CommenterNic

Sorry Nic, I'm only on 32 bit so I haven't got a clue how to help!

May 27, 2010 | Unregistered CommenterRob_Nunn

Thanks Rob, I just refuse to use IE anyway but unfortunately more and more people will move onto 64bit and it makes this code redundant (at the moment) I believe it may have something to do with Active-x controls(?) but that's beyond me? If you hear anything I really would appreciate it if you would drop me a line !

Great Photos btw !

May 28, 2010 | Unregistered CommenterNic

Well... there is no Flash player (yet) for Internet Explorer 64 so... you cannot show this slideshow for IE64 users.

To bad flickr has no HTML5 version yet.

November 16, 2010 | Unregistered CommenterTheo

Hello! Nice tutorial!
I clicked on these photos which send me to your Flickr gallery, but the slideshow looks different. The top Flickr bar is missing, when you click outside the image the slideshow is closing. Cool customization!
How did you achieve that?
Thanks!

April 27, 2011 | Unregistered Commenterbogdan

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.