Pages

Friday, October 28, 2011

10

Loop embedded Picasa flash slideshow

Picasa Web Albums offer code to embed slideshows to your blog and web page. Unfortunately the embedded slideshow displays the pictures only once, then stops. User can restart the show, but due to a bug in the flash, clicking the play button also opens the Picasa Web album from which the slideshow is made. This can be confusing to user.

So I wanted the flash to loop. It starts running when it is initially loaded and after showing all images, it stops. What if the flash was reloaded then? I developed a solution based on this. This works on Blogspot blogs, and should work on standalone pages, too. When user clicks the flash at any time, the looping stops (it would be stupid to reload the flash while user is pausing the slide show to look closer to some picture) and looping won't restart until page is reloaded.

To make it work in your blog or page, first you need the looping functions I made. Edit your template or page html, find </head>, and put this code before it:

Data provided by Pastebin.com - Download Raw

Modify Picasa slideshow embed code

In Picasa web albums you can get the embed code for slideshow, which is something like this:

<embed type="application/x-shockwave-flash" [..code.cut..] ></embed>

To make it loop, append <img onerror="slideRun(this,28300)" src="..." /> to it, resulting something like this:

<embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="600" height="400" flashvars="host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fmspotilas.fi%2Falbumid%2F5650714283562956577%3Falt%3Drss%26kind%3Dphoto%26hl%3Den_US" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed><img onerror="slideRun(this,28300)" src="..." />

This code you can embed into your post or page, see example.

28300 is timeout values in milliseconds, after which the flash is reloaded. If you have 3 second slide time (default), then good timeout (in ms) is: (number of images) x 3000 + 1300. Or for any slide time: (number of images) x (slide time) x 1000 + 1300. For example for 5 images: 5x3000+1300 = 16300. Test your own timeouts.

Although I did not test, I think that my code should be able to restart any embedded flash(es) on html page at given interval, not just Picasa slideshow flashes.

Customize the embedded slideshow

You can change the background color and time to show one image (slide time) by modifying the <embed>...</embed> code. To change background, find code

=en_US&feat=flashalbum&RGB=0x000000&feed=

Change the RGB value 0x000000 to what ever you like. 0xFFFFFF is white.

To change slide time, find code:

flashvars="host=

Add interval=#& after ", where # is number of seconds, resulting for example:

flashvars="interval=7&host=


Something better is coming along...

Embedded Picasa slideshow still flashes a bit (well it is flash application :) ) at startup and when flash is reloaded. I found a smoother slideshow, though harder to embed, from Google Gadgets. More about that in another post.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

10 comments:

Kim said... [reply]

Thank you for this. I found it useful. I'm wondering if you know what changes to make to the embed slideshow code to stop people from being able to click through into the background album.

MS-potilas said... [reply]

@Kim Hi, yes it can be done, just a little modification to the source code.

On line 25 there is now:

sDiv.innerHTML = '<div style="height:'+sFlash.height+'px;" onmousedown="slideClick(\''+sName+'\');"></div>';

change that to:

sDiv.innerHTML = '<div style="height:'+sFlash.height+'px;" onmousedown="return false;"></div>';

After the change, the buttons (previous, pause/play and next) in the flash won't work anymore (clicks won't get through).

Girl Friday said... [reply]

Is there any way to have each photo link to different pages of my own site?

Thanks much,
Rookie

Anonymous said... [reply]

Thanks - this was just what I was looking for. Any ideas on how to have a slideshow appear on mobile apple devices - ipad/iphone?

Labibi Yuzra said... [reply]
This comment has been removed by the author.
Labibi Yuzra said... [reply]

@MS-potilas


Sorry, wrong Comment before, but can you please Describe more, I want make the Picasa Photo SlideShow right and left button Clickable, but people can't Click on the photo, or at least, they CAN'T go through my album at Picasaweb

MS-potilas said... [reply]

@Clay Wheeler Hi, you can only disable all mouse clicks when using Picasa flash slideshow, so buttons won't then work anymore. I think this Prac's looping Picasa simple slideshow gadget works better. You can remove the link to Picasa album by a parameter (there's discussion about that in the comments).

Anonymous said... [reply]

Thank you so much!!!! I looked forever to find a code to make it loop. This is perfect!!!
you can check it out: http://freedom3-14-13.blogspot.com/

Thank you again!!!

Ashit said... [reply]

I a retired exec in India and want to edit a Picasa Album embed code for displaying a slideshow, as below:



I want to increase the slide transition time to 8-10 seconds if possible, and request your help in editing the code.
My e-mail ID is: sarkarsweet@gmail.com

Many thanks, Ashit Sarkar (Bangalore - June 11, 2013)

Unknown said... [reply]

Thank you so much for this! Tho I also tried to controll slideshow of picasa with JS, it didn't work. I'm lucky that I could find your web page! :)

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: