写真をブログにアップするなんていうのは日常茶飯事になりましたが、
このJavaScriptを使うと、ただの写真を動画のようにスライドショーで表示してくれます。
しかも、エフェクトがかなり豊富。サムネイルもつけられる。
Flashじゃないから、案外簡単に導入できそうです。
ということで、JavaScript （Slideshow）の使い方を研究しようと思います。
◆ダウンロード
[Slideshow A Javascript class for Mootools]
http://www.electricprism.com/aeron/slideshow/
右上メニューの[Download]をクリックすれば、ダウンロード部分へジャンプします。
必要なスクリプトファイルは以下の二つ。
・Mootools.js (1.11) with required modules only[mootools.js]
・Slideshow.js packed (5k)[slideshow.rc1.packed.js]
Slideshow.js raw with comments (15k)[slideshow.rc1.raw.js]
はSlideshow.js packedと同じソースですが、行ごとにコメントがついているので
ソース解析を行うときにはSlideshow.js raw with comments の方がよいと思います。
※FireFoxだとダウンロードではなくソースページが開いてしまうので、IEでダウンロード。
◆JavaScript設置
ダウンロードしたJavaScriptを自分のサイトで利用できるよう、
2つのjsファイルをアップロードします。
slideshowのファイル名は長いので、slideshow.jsとリネームしてしまいます。
アップロードしたら、スライドショーを表示したいHTMLの<head>内に
スクリプトを使用するためのタグを追加します。
<script type="text/javascript" src="../scripts/mootools.js"></script>
<script type="text/javascript" src="../scripts/slideshow.js"></script>
srcはjsファイルのありかの相対パスなので、各自の環境に合わせます。
これでスライドショーが利用できる環境が整いました。
次はサンプルソースで表示をさせてみます。