Image Slideshow Widget for Blogspot Blogger.

Image Slideshow Widget Code

 

The widget code makes a slideshow. The code creates the slideshow and style the size. The code is:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" 
type="text/javascript"></script>
<style type="text/css">
#picasaSlideshow {
width:  250px;
height: 200px;
margin-bottom: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feed  = "PUT FEED URL HERE";
var options = {
displayTime:2000,
transistionTime:600,
numResults : 8,
scaleImages:true,
fullControlPanel : true
};
var ss = new GFslideShow(feed, "picasaSlideshow", options);
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://www.blogdoctor.me/2009/02/custom-slideshow-gadget-for-blogger.html">Custom Slideshows.</a>

Replace "PUT FEED URL HERE" with the feed of your pictures album at Picasaweb as shown below.
 

http://picasaweb.google.com/data/feed/base/user/NAME/
albumid/NUMBER
?kind=photo&alt=rss&authkey=KEY&hl=en

Replace "NUMBER", "KEY" and "NAME" with real value.

 
Copy the full feed url and replace with "PUT FEED URL HERE".

Customizetion:

To Change Number of Images:
     numResults : 8,

To resize images attach this line right away lower the numResults line:
     scaleImages : true,

The images will be resized according to original aspect if you add this line moreover:
     maintainAspectRatio : false,

To change how long images are showed adjusted the number in :
     displayTime : 2000,

To link the images to their source add this:
     linkTarget : google.feeds.LINK_TARGET_BLANK,
 
To show images in medium thumbnail size use this line :
    thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM,
 
For small size thumbnail images :
    thumbnailSize : GFslideShow.THUMBNAILS_SMALL,
 
Lastly to increase width and height change this code :
    #picasaSlideshow {
         width: 250px;
         height: 200px;
         .....}
 
Decrease width number to fit in your sidebar width. You can get the width of the sidebar from your blog template code :
        #sidebar-wrapper {
        width: 220px;
...
}
  Now Enjoy!-