While I was developing my looping embedded Picasa slideshow, I was also searching for alternative slideshow viewers. I don't care too much about branding that appears in many slideshow services and gadgets. Then from Google Sites forum I found (nickname) prac's RSS slideshow gadget in this thread. Tried it, and it works very well in Blogger. Thank you prac, your gadgets are great.
I use the No Border version like this:
<iframe allowtransparency="true" frameborder="0" scrolling="no" width="600" height="420" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/picasa-slideshow-simple-nb.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=560&up_PHT=420&up_DTime=3000&up_TTime=400&up_CLP=Yes&up_FEED=http://picasaweb.google.com/data/feed/base/user/mspotilas.fi/albumid/5650715941079457233?alt=rss&kind=photo&hl=en_US"><a href="http://picasaweb.google.com/mspotilas.fi/KevatKesa?authuser=0&feat=directlink#slideshow">Gallery</a></iframe>
<!-- Gadget Google - Diaporama Picasa Albums Web - http://www.liens-du-vin.ch/picasa-gadget-script.htm -->
Red parts you want to change, they are the Picasa web album RSS feed and Picasa web album (#slideshow) url, in case iframe is not supported. You must change all & characters to & in the feed url (but not in album url)! You can get the links from Picasa Web albums, from right side bar "Link to this album" (add #slideshow to it to make a slideshow link) and "RSS" (the feed). And remember to change those &:s in the RSS feed url.
Green parts you may want to change: dimensions, background colors, slide time, transition time, and link pictures to gallery or not. I use white background, 3 second slide time, 400 millisecond transition time, link pictures (up_CLP) to Picasa web album. More of the parameters here (in French).
You can see the above code embedded here in action:
Showing posts with label loop. Show all posts
Showing posts with label loop. Show all posts
Saturday, October 29, 2011
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:
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.
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:
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.
Subscribe to:
Posts (Atom)
Posts (Atom)
