Skip to Content

Slideshow using Google AJAX Feed APIs


Naughty Pranav (First three years)


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

    <html xmlns="">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Pranavs Slide Show</title>
      <script src=""
      <script src=""

      <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

      <script type="text/javascript">
        function load() {
          var samples = "";

          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");

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