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 

1. <script type='text/javascript'>
2. //<![CDATA[
3. // Picasa Web Album Slideshow loop functions
4. // Alex TechnoWorld
5. // usage: <embed ...><img onerror="slideRun(this,16300)" src="..." />
6. var slideTimeout = [];
7. var slideNum = 0;
8. function slideRerun(slid, duration) {
9.   var sFlash = document.getElementById(slid);
10.   if(!sFlash) slideTimeout[slid] = 0;
11.   if(!slideTimeout[slid]) return;
12.   var parent = sFlash.parentNode;
13.   parent.removeChild(sFlash);
14.   parent.appendChild(sFlash.cloneNode(true));
15.   setTimeout("slideRerun('"+slid+"')", slideTimeout[slid]);
16. }
17. function slideRun(elm, timeout) {
18.   var sFlash = elm.previousSibling;
19.   var parent = elm.parentNode;
20.   if(!elm || !sFlash || !parent) return;
21.   while(sFlash.nodeType != 1 || sFlash.nodeName.toLowerCase() != "embed") sFlash = sFlash.previousSibling;
22.   elm.onerror = "";
23.   var sDiv = document.createElement('div');
24.   var sName = "loopingslideshow"+slideNum++;
25.   sDiv.innerHTML = '<div style="height:'+sFlash.height+'px;" onmousedown="slideClick(\''+sName+'\');"></div>';
26.   var sFlashOpa = sFlash.cloneNode(true);
27.   sFlashOpa.setAttribute("wmode", "opaque");
28.   sFlashOpa.id = sName;
29.   sDiv.firstChild.appendChild(sFlashOpa);
30.   parent.removeChild(sFlash);
31.   parent.insertBefore(sDiv, elm);
32.   parent.removeChild(elm);
33.   slideTimeout[sName] = timeout;
34.   setTimeout("slideRerun('"+sName+"')", 2500);
35. }
36. function slideClick(slid) {
37.   slideTimeout[slid] = 0;
38. }
39. //]]>
40. </script>

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="..." />


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=