Custom Slideshow Gadget for Blogger.

The Blogger slideshow gadget does not give the user many options like adjusting the size and style. Google AJAX Feed API (See Related Article link at bottom of this post)provides the full code behind the slideshow gadget and also the opportunity to customize it as you like.


You can edit the code directly to adjust the size and style and then paste it in a HTML gadget................

THE SLIDESHOW GADGET CODE

The gadget code loads the slideshow using AJAX Feed API and Javascript. Within the code a location on your page is defined to show the slideshow and style the dimensions. Lastly Javascript is used to create a slideshow control on your page. The full code is shown below :

<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>

In the above code replace "PUT FEED URL HERE" with the link of the RSS feed of your pictures album at Flickr/Photobucket/Picasaweb as shown below.

FEEDING THE SLIDESHOW

The next step is to provide a stream of pictures to the slideshow. To provide this first create an account at Flickr.com or Photobucket.com or Picasaweb.google.com. Then upload all the photos you want to show to this account.


After uploading pictures you will get the RSS feed from the album created at Flickr :

http://api.flickr.com/services/feeds/photos_public.gne
?id=USERID&lang=en-us&format=rss_200

Replace USERID with your actual userid at Flickr.com.



RSS Feed from Photobucket.com :

http://feed266.photobucket.com/albums/ii244/USERNAME/feed.rss

Replace 'USERNAME' with your actual username.



RSS Feed from Picasaweb :

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

Replace NUMBER, KEY and NAME with actual values.


Then copy the full feed url and paste in the code given for the slideshow gadget instead of "PUT FEED URL HERE".

CUSTOMIZING SLIDESHOW

To customize the slideshow modify the gadget code as shown below :

To Change Number of Images modify this line in gadget code and change the number to what you want :

numResults : 8,

To resize images add this line immediately below the numResults line :

scaleImages : true,

The images will be resized according to original aspect unless you add this line also :

maintainAspectRatio : false,

To change how long images are displayed modify the number in :

displayTime : 2000,

To link the images to their source add this line :

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;
...
}

INSTALLING SLIDESHOW

After modifyng and customizing the slideshow code as shown above :

Login at Blogger.com
Click Layouts link on Dashboard.
Click Add Gadget link on Layouts--->Page Elements subtab.
In Popup window scroll down and click on HTML gadget.
Paste the modified code in Contents window.
Save gadget.


Enjoy!

How to Change Slideshow Size?

The slideshow gadget in Blogger is quite small and may look minuscule in larger width templates. If you have a large width sidebar and wish to increase the size of the slideshow within it here is how you can do it.........


Step 1. Add Slideshow Gadget to sidebar :

1. 
   Login at Blogger.com.
   Click Layout link under Blog Title on Dashboard.
   On Add Page Elements tab click 'Add Gadget' link.
   In popup window click 'Slideshow.
   Configure your slideshow.
   Click Save button below.
   View Blog.
   

Step 2. Find width of your sidebar.

To increase the width of the slideshow you have to first find width of the column containing it. To do this go to Layout----->Edit Html subtab. In Template Code box scroll down to the CSS code for the sidebar which may look like this :

#sidebar-wrapper {
 width: 220px;
 float: right;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

See the number in the width line '220px'. That is the width of the sidebar. You cannot have your slideshow inside the sidebar with more width than this or else it may break the template and your blog sidebar may fall down below the posts column.




Step 3. Define slideshow size in CSS part of template.

The last step is to define the new size of the slideshow in the CSS part of the template. In your Template Code box paste the code given below immediately above the ]]></b:skin> tag :

.slideshow-container {
 width: 200px !important;
 height: 400px !important;
}

Preview and adjust the width and height numbers. Save Template. View Blog. Enjoy slideshow!