catch the digital flow｜北极冰仔部落格

先看一个漂亮的AJAX Slideshows吧! [点击查看demo]
当你有很多照片想在一篇文章中展示的时候, 可能也想使用一个类似这样的Slideshow吧, 其实很简单, 只需要几步就可以把它搬到你自己的blog中咯! 让我们开始吧.

1. 由于这是利用Google AJAX Feed的API实现的, 所以先要申请一个Google API的Key. Key与网站一一对应, 申请到之后这个域名上所有Google API都可以使用这个Key, 不需要为每个API服务申请一遍.
2. 打开你的header.php文件, 把以下的代码加入其中, 放在head标签之间或body标签之后都可以. 然后把其中的YOURKEY处换上你的Key, 把feed后面也换成你的Flickr或Picasa Web Albums相册的Feed.
   (目前我使用的Coolcode插件代码高亮功能出问题了, 所以暂时显示个黑的先)
   <script src="http://www.google.com/jsapi/?key=YOURKEY"
   type="text/javascript"></script>
   <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
   type="text/javascript"></script>
   <script type="text/javascript">
   function LoadSlideShow() {
   var feed = "http://www.google.com/uds/solutions/slideshow/sample.rss";
   var options = {displayTime:2000, transistionTime:600, scaleImages:true};
   var ss = new GFslideShow(feed, "slideShow", options);
   }
   /**
   * Use google.load() to load the AJAX Feeds API
   * Use google.setOnLoadCallback() to call LoadTuneBar once the page loads
   */
   google.load("feeds", "1");
   google.setOnLoadCallback(LoadSlideShow);
   </script>
   <style type="text/css">
   #slideShow {
       width: 300px;
       height: 250px;
       padding: 0;
       }
   </style>
   <!-- Google AJAX Slideshow -->

3. 在你需要显示Slideshows的地方加入以下代码就可以显示啦, 我把它写在了这篇文章的开头, 就是目前的效果咯.
   <div id="slideShow">Slideshows Loading...</div>