Glider.jsを使う。(1)

[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の設定が少し長くなるので、続きは次回とします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください