以前、自分が作ったZEN DISTROのサイトにYahooが提供している
ライブラリーYahoo User Interface（YUI）を適用したという記事を書いた
そのYUIをベースに画像のスライドショーをするというまた、素敵な機能を作った人がいるので
これまたスライドショーの機能をZENのサイトに適用してみた
ここからスライドショー見れますよ。
以前なら、このような画像のスライドショーとリンク先を変更するにはFLASHで作っていたが
それがJavaScriptで実現できるようになったのはとても嬉しいね。
なんで嬉しいかって？
それは更新が簡単だからさ
FLASHで作ると画像を後で変更したいときに、とても面倒なんだ。
専門知識がいろいろいるから、簡単にはできないんだ。
でも、JavaScriptとHTMLで作れると更新が非常に簡単!!
しかも、ZENのサイトの場合は画像、画像のリンク先が全てデータベースに登録されていて
更新作業を使い方簡単の管理画面で行うことができる。
なので、面倒なJavaScriptとHTMLを書く必要が無いし
サイトの運営者が好きなときにいつでも更新をすることができるんだ。
こいつは、いいぜ！！
このJavaScirptのスライドショーを自分のサイトにも実装したい方は以下の手順でやってみてください。
Step 0:
YUIを持っていない人はここからダウンロードする
Step 1:
スライドショーをしたいHTMLに以下のYUIのJavaScriptをインクルードする
<script type="text/javascript" src="css/yahoo.js"></script>
<script type="text/javascript" src="css/event.js"></script>
<script type="text/javascript" src="css/dom.js"></script>
<script type="text/javascript" src="css/animation.js"></script>
<script type="text/javascript" src="css/connection.js"></script>
Step 2:
今回のスライドショーを作った人のサイトからJavaScriptとCSSをここからダウンロードする
Step 3:
また、以下のようにスライドショーをしたいHTMLにJavaScriptとCSSをインクルードする
<script type="text/javascript" src="css/slideshow.js"></script>
<link rel="stylesheet" href="css/slideshow.css" type="text/css" />
Step 4:
## この中のheight:350px;width:750px;は縦と横の大きさを入力する。ここでは縦 350ピクセル、横 750ピクセル
<div id="yui-sldshw-displayer2" class="yui-sldshw-displayer"
style="height:350px;width:750px;">
## 以下にはスライドショーで表示させたい画像のHTMLを書きます。
## ここでは各画像にリンクも設定している
## 各画像には以下のようにidとclassを設定している## 画像その１
<a href="http://www.family-products.com/mt/news/archives/2005/12/nowadays_1.html"><img
id="frame_1" class="yui-sldshw-active yui-sldshw-frame"
src="http://www.zendistro.com/images/promo/15.jpg" /></a>
## 画像その２
<a href="http://www.zendistro.com/products03-1183.html"><img
id="frame_2" class="yui-sldshw-active yui-sldshw-frame"
src="http://www.zendistro.com/images/promo/69.jpg" /></a>
## 画像その３
<a href="http://www.zendistro.com/products03-1150.html"><img
id="frame_3" class="yui-sldshw-active yui-sldshw-frame"
src="http://www.zendistro.com/images/promo/76.jpg" /></a>
</div>## ここでは画像を右にスライドするように”effects.slideRight”で設定してる
## その他にエフェクトもあるので、下で紹介します
## slideshow2.loop(); と記述してスライドショーが自動的に始まるようにしている。
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function()
{ slideshow2 = new YAHOO.myowndb.slideshow("yui-sldshw-displayer2",
{ effect: YAHOO.myowndb.slideshow.effects.slideRight}); slideshow2.loop();});
</script>
■スライドショーエフェクト一覧表
[ネタ元： PHPSPOT]
[YUIスライドショーライブラリー作った人]
