October 22, 2012

Blogger Simple Slideshow From Photo Album Feed URL


image slideshow
As we know many people keep they online photo album on Picasaweb Google, Photobucket or Flickr.

And to loads it to your blogger, you can used Ajax API and Javascript which loading your photo album Rss Feed url.

Photo album feed url example form picasa.google.com looks like : https://picasaweb.google.com/data/feed/base/user/-your-number-id-/albumid/ -your-number-id- ?alt=rss&kind=photo&authkey=-your-authkey-pugE&hl=en_US

To show your photo image, you need copy this code below and replace "YOUR-RSS-FEED-URL" with your photo album Rss Feed url like example above.

<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">
      #slideshow{
        width:  550px;
        height: 250px;
        margin-bottom: 1px;
        padding: 1px;
      }
    </style>
    <script type="text/javascript">
    google.load("feeds", "1");
    function OnLoad() {
      var feed  = "YOURS-RSS-FEED-URL"; /* replace with your feed url */
      var options = {
        displayTime:6000,
        transistionTime:600,
        numResults : 5,
        scaleImages:true,
        fullControlPanel : true
      };
      var ss = new GFslideShow(feed, "slideshow", options);
    }
    google.setOnLoadCallback(OnLoad);
    </script>
<br />
<div class="gslideshow" id="slideshow">
<div class="feed-loading">
Loading...</div>
</div>

You can place that code above on your widget (gadget) or your posting page and make adjust the size with yours, and if you want a see the demo, visit this link below:

Image Slideshow With Url Feed Demo

I hope this post is useful for people who need this
Thank You.

1 comment: