Home > Related Links, user > Embedded Slideshow for Your Side

Embedded Slideshow for Your Side

Since phTagr supports Media RSS it is quite simple to embed a simple slideshow to your page via Googles Feed API. It supports a slide show control which loads the Media RSS and displays the images one by one. The API reference of Google’s slide show control is straight forward and with few changes your web side displays the newest public images of your gallery. Following example shows the embedded slideshow of images from the phTagr demo page:

<h2>Photos</h2>
<p>
  <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: 180px;
      height: 180px;
      color: #dddddd;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #eee;
    }
  </style>
  <script type='text/javascript'>
    function load() {
      var samples = 'http://demo.phtagr.org/explorer/media/media.rss';
      var options = {
        displayTime: 2500,
        transistionTime: 600,
        scaleImages: true,
        fullControlPanel: true,
        linkTarget: google.feeds.LINK_TARGET_BLANK
      };
      new GFslideShow(samples, 'slideshow', options);
    }
    google.load('feeds', '1');
    google.setOnLoadCallback(load);
  </script>

  <div id='slideshow' class='gss'>Loading...</div>
</p>

I wrote a small WordPress gSlideShow widget plugin (based FlickrRSS) on  which embeds your Media RSS to your blog (download). Enjoy!

  1. No comments yet.
  1. No trackbacks yet.

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word