TOP > テンプレート > jQuery Blindsでスライドショー

jQuery Blindsでスライドショー


スライドショーをしてくれるjQueryを使ってみました。

jQuery BlindsというjQueryが公開されているようで、今回はそのjQuery Blinds-0.9を使ってみました。

手順1.jquery.blinds-0.9.jsをダウンロードしてくる。

[Working example]をダウンロードしてくると、jquery.blinds-0.9.jsだけでなくjQuery本体のjquery-1.4.1.jsもついてきます。

手順2.headに必要なファイルのパスを通す。

以下の2つのファイルにパスを通します。

jquery-1.4.1.js
jquery.blinds-0.9.js

手順3.スライドショーのエリアとサムネイルボタンを記述してblindsをロード。

任意のクラス名(下記の例はslideshow)で画像をリスト定義し、サムネイル画像がクリックされた時にそのクラス名のblinds_change()が呼ばれるようにセットする。



[htmlのソース]





[実行結果]



ビーチ カヤック 海の中
Sponsored Link
Powered by PHPなんか怖くないぞ(>_<)