Google AJAX Feed APIでスライドショーを設置

 以前Google AJAX Feed APIを利用しRSSフィードを表示する方法を紹介しましたが、今回はFlickrなどで提供されているRSSフィードを元にしたスライドショーの設置方法を紹介します。
Loading...

 まずJavaScriptは以下のようになります。API keyについてはこちらで取得してください。

<script src="http://www.google.com/jsapi/?key=取得したAPI Key"
    type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
    type="text/javascript"></script>

  <script type="text/javascript">

    function load() {

      var samples = "表示するRSS";

      var options = {
        linkTarget : google.feeds.LINK_TARGET_BLANK,
        fullControlPanel : true
      };
      new GFslideShow(samples, "sampleSlideshow", options);

      options = {
        displayTime: 2000,
        transistionTime: 600,
        scaleImages: true,
        linkTarget : google.feeds.LINK_TARGET_BLANK
      };
    }

    google.load("feeds", "1");
    google.setOnLoadCallback(load);

  </script>
 次のCSSで画像を表示する枠を定義します。
  <style type="text/css">

    .gslideshow {
      margin-left: auto;
      margin-right: auto;
      background-color: #000000;
    }
    .gslideshow a img {border : none;}

    #sampleSlideshow { width : 288px; height : 216px; padding: 10px;}

    .feed-loading {
      width: 100%;
      padding-top: 10px;
      font-size : 11px;
      text-align : center;
      color : #dddddd;
    }
  </style>
 でbody内の表示する場所に以下を挿入します。
<div id="sampleSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加