[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。
写真だけでなく、Flashコンテンツなども紙芝居表示することができます。
サンプルを見たところ、かなり使える幅が広そうです。
まずは画像で挑戦したいと思います。
[glider.jsのダウンロード]
glider.jsページのDounLoad[Visit the project page to download or check out the source via SVN.]
をクリックすると、GoogleCodeのダウンロードページへジャンプします。
SVNから取得することもできますが、zip形式で取得できるので、
You can also download a zipped version [here.]
をクリックし、圧縮ファイルをダウンロードします。
サンプルhtml、JavaScriptファイル、CSSファイルが同胞されています。
サンプル以外を適当な場所へ配置し、HTMLで宣言しておきます。
<link rel="stylesheet" href="xxx/stylesheets/glider.css" type="text/css" />
<script src="xxx/javascripts/prototype.js" type="text/javascript"></script>
<script src="xxx/javascripts/effects.js" type="text/javascript"></script>
<script src="xxx/javascripts/glider.js" type="text/javascript"></script>
[javascripts]フォルダ内をみるとわかるのですが、
glider.jsを表示するには、prototype.jsが必要となります。
既に、prototype.jsを取り込んでいる場合は、このファイルは不要となります。
また、scriptaculous.jsの[effects.js]も必要となります。
こちらも、既に取り込んでいる場合は新しく設定する必要はありません。
もとからあるファイルの場所を指定すればOK。
[基本的なスライドの設定]
HTMLにスライド表示用の設定を行い、
Scriptを実行させることになります。
HTMLの設定が少し長くなるので、続きは次回とします。