ページ

2011年2月17日木曜日

Feed API - 9

■ スライドショーです。Feed-8にオプション設定を加えたものです。

■ サンプルです。  




<html>
<head>
<title>
Feed API サンプル-9
</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: 288px;
      height: 216px;
      color: #dddddd;
      background-color: #ffffff;
      padding: 8px;
    }


  </style>
  <script type="text/javascript">
    function load() {
      var samples = "http://picasaweb.google.com/data/feed/base/user/pomepomeworld/albumid/5278395104702856113?alt=rss&kind=photo&hl=ja";
      var options = {
        // numResults : 8,                         // イメージの表示枚数;初期値はGoogle設定の最大値
         scaleImages : false,                     // 画像スケールの制御;divの初期値は hide overflows
         maintainAspectRatio : false,            // scaleImages: trueでアスペクト比の設定が可能
         pauseOnHover : true,                    // マウス置いた時;hover の設定
         thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM,        // サムネイル設定
             //  GFslideShow.THUMBNAILS_SMALL, GFslideShow.THUMBNAILS_MEDIUM, or GFslideShow.THUMBNAILS_LARGE.(初期値)のいずれか




        displayTime: 2000,                            //表示時間;初期値は3秒
        transistionTime: 600,                         // スライド切り替えに要する時間;初期値は1秒
        linkTarget : google.feeds.LINK_TARGET_BLANK   //画像のリンクターゲット
      };
      new GFslideShow(samples, "slideshow", options);


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


<body style="margin-top:3em;">


<center>
  <div id="body">
    <div id="slideshow" class="gss">Loading...</div>
  </div>
<p />
■ ”Feed API サンプル-8” をオプション設定付きにしたものです。■
<p />
■ Picasaウェブリアルバムへアップしたものを利用しています。■
</center>


</body>
</html>