大きい画像1箇所とサムネイルいくつか配置して、サムネイルにマウスオーバーしたら大きい画像をサムネイルのやつに変更するスクリプト。
テーブル版、複数設置版、クロスフェード版の他、jQuery版とMooTools版も書きました。
シンプル版
thumbsというIDにあるimgタグを自動収集して、srcから_thumbを抜いたものを
viewに入ってるimgのsrcへ置換します。
テーブル版
カスタマイズする場合はforの変数iが1から始まっている事に注意。
これは取得したimgの配列から先頭にあるimg#rollover_viewを飛ばすためです。
逆配置にする場合は、0スタートで(myImg.length-1)とする。
ページ内に複数設置する場合
大きい画像とリストのIDをクラスに変更。親のIDを指定して実行します。
複数設置+クロスフェード
素のJavaScriptに特別なこだわりがあるわけでないのなら、
MooToolsとかjQueryを使ったギャラリープラグインを使う方がお手軽だと思う。
jQuery版
バージョンは1.5で組みましたが1.3以上なら使えるんじゃないかなと。
プラグイン形式です。
MooTools版
バージョン1.3対応。
Download
ZIPにはリスト版・テーブル版・マルチ版・クロスフェード版のhtmlファイルと画像、元のpsdファイルをまとめてあります
ダウンロード:[ダウンロードが見つかりません]
- 2011-02-15 クロスフェード版バグ修正。jQuery版・MooTools版追加。デモをjsfiddleに移した
- 2011-01-11 クロスフェード版追加
- 2011-01-06 マルチ版追加
- 2009-07-03 サンプルZIP作成ついでに書き直し
- 2008-11-11 ID抜けてたうっかりミス修正