Skip to Content

Slideshow using Google AJAX Feed APIs

Slideshow


Naughty Pranav (First three years)

Loading...



Notes
  • The dates seem to get messed up with Internet Explorer. Works fine on Firefox3 and Chrome.
  • Google AJAX Slideshow Feed API documentation can be found here.
  • Javascript Source Code (extended from the HelloWorld example)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Pranavs Slide Show</title>
      <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">
        .gss a img {border : none;}
        .gss {
          width: 488px;
          height: 418px;
          color: #dddddd;
          background-color: #000000;
          padding: 8px;
        }

        .gssc {
          width: 488px;
          height: 50px;
          color: #dddddd;
          background-color: #000000;
          padding: 8px;
          FONT-SIZE: 18px;
          COLOR: #7e2217;
          FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
        }
       H1 {
          FONT-SIZE: 24px;
          COLOR: #7e2217;
          FONT-FAMILY: Helvetica, Verdana, Arial
       }


      </style>
      <script type="text/javascript">
        function load() {
          var samples = "http://picasaweb.google.com/data/feed/base/user/arun.pict/albumid/5391448699595494241?alt=rss&kind=photo&authkey=Gv1sRgCJ-Y1r6alLvTqQE&hl=en_US";

          var options = {
            fullControlPanel : true,
            numResults: 200,
            fullControlPanelSmallIcons : false,
            pauseOnHover : false,
            transitionCallback: myTransitionHandler,
          };
          var ss = new GFslideShow(samples, "slideshow", options) 

        /**
          * Place the date of the entry under the image
          * The date is in the following form and is available in
          * entry.contentSnippet. The title is available from entry.title
          *
          * Format of Date
          *  Date: Oct 5, 2007 7:37 AMNumber of Comments on Photo:0View Photo
          */
         function myTransitionHandler(entry, transitionTime) {
           var id = document.getElementById("caption");
           var text = entry.contentSnippet;
           var fields =  text.split(/:/);
           var content = fields[1].split(/ /);  
           id.innerHTML = content[1] + ' ' + content[2] + ' ' + content[3];
           id.innerHTML += "<br>" + entry.title;
          }
        }

        google.load("feeds", "1");
        google.setOnLoadCallback(load);
      </script>
    </head>

    <body>
      <div id="body">
        <center>
        <H1> Naughty Pranav (First three years) </H1>
        <div id="slideshow" class="gss">Loading...</div>
        <div id="caption" class="gssc"></div>
        </div>
      </div>
    </body>
    </html>