Info kplace.plala.jpから移設しました

AJAX Slide Showメモ

作成日: 2008/08/18
■目的
　Google AJAX Slide Showの追加方法のメモです。

■スライドショウをWebページに追加するには
　AJAX Feed APIを追加するには、3つの簡単なステップを踏みます。
(代わりに "hello world" からスタートし コードを変更することもできます。)

ステップ 1 - AJAX Feed API のロードとSlide Showコードの追加

最初のステップは Google AJAX Feed APIをロードし、 以下の2行のSlide Show のコードをWebページやBlogのテンプレートなどのアプリケーション内に記述します。 
<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>

ステップ 2 - スライドショウの表示位置の指定

次のステップはスライドショウを表示する位置を一般にはdiv要素内に記述します。ページ内で複数のスライドショウの表示が可能です。
<div id=" slide Show" > Loading < /div>
width やheightなどのスタイルの属性をセットすることを要求されます。スライドショウはセットされているサイズ以外では動作しません。また padding, bordersなどその他のスタイル属性もセットできます。
#slideShow {
  width : 160px;
  height : 160px;
  padding : 10px;
}

ステップ 3 - GFslideShowの生成と設定

最後のステップはSlide Show controlを生成し設定します。
最初のステップで、AJAX Feed APIを実行しロードするためのコードを取得しました。
これを実行する最も簡単な方法は、スライドショウを初期化するための簡単な functionを記述し、コードを実行するために google.setOnLoadCallback()を使います。
以下のコードは、単純なスライドショウの生成と設定のための function (LoadSlideShow) に対するgoogle.setOnLoadCallback()の正しい使い方の例を示します。
<script type="text/javascript">
  function LoadSlideShow() {
    var feed  = "http://feed.photobucket.com/images/sunsets/feed.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 LoadSlideShow once the page loads
   */
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadSlideShow);
</script>

■スライドショウのカスタマイズと拡張機能

スライドショウにはスライドショウをコントロールする多くのオプション機能を含みます。

イメージの数

デフォルトのイメージ数はGoogle Feedsによって提供される最大数になります。
これは numResultsのoptionsで変更できます。
以下はそのサンプルです。
<script type="text/javascript">
  var options = {
    numResults : 8
  }
  new GFslideShow(feed, "slideShow", options);
</script>

イメージの表示スケール

デフォルトでは要素内のイメージはスケーリングされません。
Slide Showではオーバフロして隠れるdivエレメントを生成します。
イメージを削るにはscaleImagesとそのoptionsを使用します。
スケーリングでは、maintainAspectRatio を falseにしなければ、元のアスペクト比が保持されます。

scaleImages

<script type="text/javascript">
  var options = {
    numResults : 16,
    scaleImages : true,
  }
  new GFslideShow(feed, "slideShow", options);
</script>

maintainAspectRatioNew!

<script type="text/javascript">
  var options = {
    numResults : 16,
    scaleImages : true,
    maintainAspectRatio : false
  }
  new GFslideShow(feed, "slideShow", options);
</script>

表示時間

デフォルトでは GFslideShow.DEFAULT_DISPLAY_TIMEで約3秒間表示されます。
長さを変えるにはdisplayTime とoptionsを使用します。
<script type="text/javascript">
  var options = {
    numResults : 16,
    scaleImages : true,
    displayTime : 5000
  }
  new GFslideShow(feed, "slideShow", options);
</script>

切替時間

デフォルトではイメージはdisplayTimeの間表示され、Alpha Blend（フェードイン/フェードアウト)により次に切り替わります。
切替時間のデフォルトは, GFslideShow.DEFAULT_TRANSITION_TIME（単位ms)で、約１秒です。
値を変えるにはtransitionTimeの optionsを使います。transitionTime に0は使用できない点に注意ください。
<script type="text/javascript">
  var options = {
    numResults : 16,
    scaleImages : true,
    displayTime : 5000,
    transitionTime : 500
  }
  new GFslideShow(feed, "slideShow", options);
</script>

URLリンク

デフォルトで表示されるイメージのソースURLにはリンクされていません。
リンクするにはlinkTarget とそのoptionsを使用します。
Optionはイメージのイメージのリンクターゲットを定義するのに使用しGoogle Feeds API はいくつかのショートカットを準備しています。
<script type="text/javascript">
  var options = {
    numResults : 16,
    displayTime : 5000,
    linkTarget : google.feeds.LINK_TARGET_BLANK
  }
  new GFslideShow(feed, "slideShow", options);
</script>

一時停止の無効化

デフォルトで、マウスをイメージ上に移動させると表示を一時停止します。
これを変更するにはpauseOnHover とそのoptionsを使用します。 
<script type="text/javascript">
  var options = {
    linkTarget : google.feeds.LINK_TARGET_BLANK,
    pauseOnHover : false
  }
  new GFslideShow(feed, "slideShow", options);
</script>

イメージサイズ

Slide Show は3種のサイズをサポートします。
デフォルトはフィード内で使用しているサイズと同じ"large" です。
options の属性で "small or "medium"を使用できます。 変更は thumbnailSize とoptionsを使用します。
使用できる値は GFslideShow.THUMBNAILS_SMALL, GFslideShow.THUMBNAILS_MEDIUM, or GFslideShow.THUMBNAILS_LARGE. です。
<script type="text/javascript">
  var options = {
    numResults : 8,
    thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM
  }
  new GFslideShow(feed, "slideShow", options);
</script>

イメージ取得先

デフォルトでSlide ShowはGFslideShow.MRSS_THUMBNAIL_TAG = "thumbnail";とGFslideShow.MRSS_THUMBNAIL_NS = "http://search.yahoo.com/mrss/";に よって定義されるように、イメージ検索のためにTagとNamespaceで定義されたMedia RSSを使用します。
Slide Show はまたiTunesのカバーアートを定義できます。
GFslideShow.ITMS_THUMBNAIL_TAG = "coverArt"; およびGFslideShow.ITMS_THUMBNAIL_NS = "http://phobos.apple.com/rss/1.0/modules/itms/";.Slide Showが thumbnailTag と thumbnailNamespace とoptions. を使ってイメージを探す先をTagとNamespaceで変更できます。
<script type="text/javascript">
  var options = {
    numResults : 8,
    thumbnailTag : GFslideShow.ITMS_THUMBNAIL_TAG,
    thumbnailNamespace : GFslideShow.ITMS_THUMBNAIL_NS
  }
  new GFslideShow(feed, "slideShow", options);
</script>

■"Hollo World"

SlideShowの完全なHTMLサンプルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Google AJAX Feed API - AJAX Slide Show Sample</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: #000000;
      padding: 8px;
    }

  </style>
  <script type="text/javascript">
    function load() {
      var samples = "http://dlc0421.googlepages.com/gfss.rss";
      var options = {
        displayTime: 2000,
        transistionTime: 600,
        linkTarget : google.feeds.LINK_TARGET_BLANK
      };
      new GFslideShow(samples, "slideshow", options);

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

<body>
  <div id="body">
    <div id="slideshow" class="gss">Loading...</div>
  </div>
</body>
</html>
■結果
　Callbackを除いてカスタマイズに必要なコードの説明をメモしました。
　本メモの内容を使用する場合は自己責任になります。
　 blog 　　 MovableType