link-log powered by fullsizeimage.inc

Mar  14,  2008

jQueryを使ったスライドショー

jQueryを使ったスライドショーを作ってみました。
■スライドショー　サンプル

ソースを公開するので面白そうだと思った人はダウンロードして使ってみてください。
■ダウンロード

表示用とサムネール用の２つの画像を用意する必要がありますが、写真数の変更は基本的にHTMLの修正だけで動作します。

動作検証ブラウザは
Windows
　IE６,７
　FireFox 2.0
Mac
　FireFox2.0
　Safari3.0（たぶん２でも動きます）

CSSのoverflow:hiddenとposition:relativeのバグが解消できなかったためIEとそれ以外のブラウザでは画面構成とスライドショーの動作が異なりますのでご注意ください。

写真の枚数を変えるときはindex.htmlの「<!-- 編集領域　ここから --><!-- 編集領域　ここまで -->」となっている2ヶ所を変更してください。

-----画像表示部分-----
<div class="photo_caption" id="main1">
<img src="img/1.jpg" alt="image" width="512" height="384" class="photo" />
<div class="caption"><h2>プリンちゃん１</h2><p>トイプードルのプリンちゃん。椅子にすわる</p></div>
<div class="mouse_target"></div><!-- mouse_target -->
</div><!-- photo_text -->

-----サムネール部分-----
<div class="th_photos"><a href="#" id="p_id1"><img src="img/1_th.jpg" alt="image" width="64" height="48" class="photos" /></a></div><!-- th_photos -->

画像サイズは（とりあえず）固定でお願いします。
「画面表示部分」のid="main1"と「サムネール部分」のid="p_id1"の部分は連番になるので表示する画像の数に合わせて修正してください。
画像のファイル名は連番にしなくても大丈夫です。任意の名前を付けてください。画像を置く場所も好きな場所にできます。

このスライドショーはjQueryとプラグインのeasing pluginを使っています。
それぞれの詳しい情報は
▼jQuery
http://docs.jquery.com/Main_Page
▼easing plugin
http://gsgd.co.uk/sandbox/jquery/easing/
を見てください。

このスライドショーは改変、改修、再配布してもらって全然構いません。商用利用もOKです。
ボタン画像以外はHTMLとCSSで画面を作っているのでデザインやインターフェースの変更、表示画像サイズの変更もそんなに難しくないと思います。
index.jsがスライドショー本体になりますが、これも処理をだらだら書いているだけなのでjQueryの基本を理解していればそんなに難しくないし、すぐにソースのしょぼさに気付くと思います（恥）

////
写真表示の切り替え用に使っているクラスの付けたり外したりが一番面倒くさい処理になってます。addClass()、removeClass()じゃなくswapClass()みたいな関数があればいいのにと思うんですが。。。
////

サンプルで使っている画像はドッグウェアの「free stitch」から提供してもらいました。
どうもありがとうございます。

yamada ： 5:19 PM