HOWTO: Create your own Slide Show Gadget using WebAlbums and iGoogle API

Besides programming all day, I also like to take pictures. One problem, is that after taking cool pictures, I tend to forget about them.. Recently I had some time on my hands to dig into Google technologies, especially their GData and Gadget API. Since I am already using things like iGoogle, Picasa, and WebAlbums, I wondered how difficult is it to put these technologies together to create a simple Slide Show Gadget. So in this post, I would like to discuss how to create your own Slide Show Gadget using WebAlbums and iGoogle API. First things first, Google provides excellent documentation on how to get
started. A good place to experiment is
Google Gadget Editor or GGE, since it gives the ability to manage gadgets and publish them to iGoogle. It also has plenty of code samples to get you on your way. The only drawback is that GGE only supports legacy API. For developing gadgets using new API there is the
Google Developer Sandbox. It comes with some helpful tools including an option to turn off gadget caching. It is still in development mode, so not all gadget features are available. In this example we are going to use legacy API, because it supports most of the features discussed in this post. Secondly, you need to get your WebAlbums RSS feed. Login to WebAlbums, click on the album you'd like to syndicate, and click RSS link on the right. It looks somewhat like this: http://picasaweb.google.com/data/feed/base/user/YOUR_USERNAME/albumid/5297576827018401553?alt=rss&kind=photo&hl=en_US Once all is set up, you need to fetch your image data.
Working with Feeds explains how to do this in greater detail. Here is an example

Once data is loaded, you need to parse it, which could look something like this:

You can also use your favorite JavaScript library to make things a bit simpler. For example, to use JQuery, include the following:

Now, once you have extracted a list of image urls, how do you compile them into a slide show? And a bit more involved question is, how do you create fade in/out effect on image change? Here is one possible solution that works out pretty well..
Create html with two image divs

Add it to the container

Use absolute positioning to lay divs on top of each other

On change, fade-in one div as you fade-out the other

To take care of animation, we need a way to get next image and a timer. We can use Math.random to randomize our photos or just continuously loop through image array. In this example we are going to use Math.random. To implement timer, we can use setTimeout(callback, millis), which executes callback function after specified 'millis' have elapsed. Here is the code. Notice how we are setting 'showSlide' function as the callback for 'setTimeout'

Last step is to make sure that your request code is called on gadget load.

That's it. Now you have your very own picture Slide Show Gadget! The coolest part is that now you can keep uploading pictures to your WebAlbums account and seeing them in your newly created gadget.. A word of advice is in order.. as you develop your gadgets, make sure to use gradual approach, as one single mistake can render your gadget unusable. Here are some possible improvements we can make to our gadget's functionality: - cache images (pre-load) - expose animation parameters via user preferences - provide a link to original image iGoogle Developer Forum is helpful in case you encounter any problems. End result looks something like this

Once your gadget is in iGoogle, you can view source by following these steps: - click on top arrow (in gadget header) - select 'About this gadget' - once on 'About' page, click on 'View source' located on the right Or you can also find source code here :) One cool thing about Google Gadgets is that they are embeddable. Follow these steps to get embeddable script: - click on top arrow (in gadget header) - select 'About this gadget' - click on 'Embed this gadget' located on the right Feel free to use source code for this gadget for your development needs. Good luck with your gadget developments and Happy coding!
Ikayzo - Design • Build • Localize | Web • Desktop • Mobile