Retoucher.jp

主にPC関連の備忘録と映画の感想を書いています。

ホーム > PC関連備忘録 > Google > Google AJAX Feed API(SlideShow)

Google AJAX Feed API(SlideShow)

忘れる前にFeed APIを使ったスライドショーの手順を記載しておきます。


<head>部

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

スタイルシート(面倒なのでHEAD部に書き込む)

<style type=”text/css”>
.gss a img {border : none;}
gss {
color: #dddddd;
background-color: #000000;
padding: 0px;
}
#slideshow{
width:160px;
height:120px;
padding:10px;
}
</style>

こちらもHEADに書き込む

<script type=”text/javascript”>
function load() {
var samples = “任意のRSS。Picasaで試すのが一番簡単に結果が出る。”;
var options = {
displayTime: 1500,
transistionTime: 600,
scaleImages : true,
  numResults : 10,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, “slideshow”, options);
}
google.load(“feeds”, “1″);
google.setOnLoadCallback(load);
</script>

書いておきたい事として、上のオプション部分。
・displayTime: 1500,:(表示時間)
・transistionTime: 600,:切り替え時間
・scaleImages : true,:イメージのリサイズ
 ※↑の部分を追加しないと、CSSの部分でサイズを決めても実際のサイズで表示されてしまう。(フィットさせるには必要)
・numResults : 10,:読みこむイメージ最大数
 ↑上は10になっているので、読み込むRSSの数が100であっても、10枚でループします。
 記載しなければ、全ての枚数。
・linkTarget : google.feeds.LINK_TARGET_BLANK:(リンクターゲット)

オプション部分でpauseOnHover : false(デフォルトはtrue)もあるが、スライドショーを止めずに流しっぱなしと言うのもいかがなものなので、ここでは省略

以下<body>部分の任意の場所に

<div id=”slideShow”>Loading…</div>

PicasaのRSSを読み込むテストをしてみたが、結構いい感じでスライドショーしてくれる。
順番どおりしか再生してくれないので、ランダムに再生してくれたら、結構自分の中では実用的だと思う。

コメントはまだありません