Adding a flickr SlideShow Part 2

My Juhu Neighbors SlideShow

Here's the code I use for this one:

<div style="text-align:center; width:500px; height:500px; margin:auto; border:20px ridge #c0c0c0">
<iframe src= "http://www.flickr.com/slideShow/index.gne?user_id=79139412@N00&set_id=72057594078004688" width="500" height="500" frameborder="0" scrolling="no"> </iframe> </div>

The difference between this and the previous post is use of an <iframe> instead of the flash object code. The user_id field is your flickr User ID and can be found at this link under Useful Values. The set_id can be found in the URL of the Flickr set page.

I discovered this method at flickrSLiDR while looking for an answer to a strange cursor behavior problem. I never solved that one. This is a simple alternative SlideShow with slightly different appearance and features. FlickrSlidr will automatically generate very similar code for you allowing you to create a slideshow based on your flickr photostream, sets, tags or groups.

Adding a flickr SlideShow

So I’m asking a question about posting flickr Slideshows on Blogger? Have I ever seen a Flickr slideshow? Did I see that Share this link in the upper right corner? Or the big Share this ICON at the end? Duh! Not me.

Mianyang & Chengdu 1997

I wasn't lost then

Flickr gives you the code. Cut & paste. That’s it. Your done!

If you got here from a link on Blogger Help Forum about strange cursor behavior with Flickr slideshows, I never solved that. Didn’t need to. This is so much easier and it doesn’t screw-up your viewer’s browser. If I ever solve it (i.e. if someone else posts a response on the thread with the answer) I’ll update here with due credit.

Here’s the code. Just the way it comes from flickr.

<div style="text-align:center; width:400px; height:300px; margin:auto; border:20px ridge #c0c0c0"> <object width="400" height="300"> <param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Flostbob%2Fsets%2F72157605048883315%2Fshow%2F&page_show_back_url=%2Fphotos%2Flostbob%2Fsets%2F72157605048883315%2F&set_id=72157605048883315&jump_to="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Flostbob%2Fsets%2F72157605048883315%2Fshow%2F&page_show_back_url=%2Fphotos%2Flostbob%2Fsets%2F72157605048883315%2F&set_id=72157605048883315&jump_to=" width="400" height="300"></embed></object></div>

I put the flickr code inside the <div> tag with the frame around it while figuring out how to center things. I like the way it looks but the border isn't needed. The code in black is cut & paste from Flickr. The code red! is my own. Take that as a warning.

You can change the size and aspect ratio of the show and control other features too. I will give you an example shortly but that post is still in draft form.