Once data is loaded, you need to parse it, which could look something like this:
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..
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!