Wataame Frog

サムネイルのマウスオーバーでメイン画像を切り替える jquery.tgImageChangeV2.js

このページはブログ『Wataame Frog』の「jQueryでサムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプトを書いてみた」という記事のサンプルです。
記事URL : https://nodoame.net/archives/1841

関連スクリプト

Satoさんコメント用 複数設置

サムネイルにマウスカーソルを合わせると画像が入れ替わります

img2
img2_thumb img3_thumb img7_thumb img8_thumb img14_thumb

複数設置 2

サムネイルにマウスカーソルを合わせると画像が入れ替わります

img15
img15_thumb img16_thumb img17_thumb img18_thumb img19_thumb

使い方

一画面に複数個を設置できるよう、画像オプション、スクリプトオプションを変更。

ヘッダ記述方法

htmlヘッダー中に、以下スクリプトを記述して下さい。
（※jquery.tgImageChangeV2.js本体及びjqueryも読み込んでください）

<script>
jQuery(function(){
$(this).tgImageChange({
selectorThumb : '.thumb', // ←★サムネイル画像セレクタ(ドットは必須)
fadeOutTime : 50, // ←★カーソルON時のアニメーション時間
fadeInTime : 200, // ←★カーソルOFF時のアニメーション時間
thumbCssBorder : '2px solid #ff5a71', // ←★カーソルON時のサムネイル枠CSS
});
});

jQuery(function(){
$(this).tgImageChange({
selectorThumb : '.small',
fadeOutTime : 50,
fadeInTime : 200,
thumbCssBorder : '2px solid #ff5a71',
});
});
</script>

画像記述例

メイン画像のclass名と同名のname名をサムネイル画像に付与することにより、関連付けられます。（赤色）
サムネイル画像のクラス名は、スクリプトのオプションで指定可能です。（青色）

●メイン画像

<img src="./img/img2.jpg" width="350" height="350" alt="img2" class="mainImage" />

●サムネイル画像

<img src="./img/img2_thumb.jpg" width="90" height="90" alt="img2_thumb" class="thumb" name="mainImage" />
<img src="./img/img3_thumb.jpg" width="90" height="90" alt="img3_thumb" class="thumb" name="mainImage" />
<img src="./img/img7_thumb.jpg" width="90" height="90" alt="img7_thumb" class="thumb" name="mainImage" />
<img src="./img/img8_thumb.jpg" width="90" height="90" alt="img8_thumb" class="thumb" name="mainImage" />
<img src="./img/img14_thumb.jpg" width="90" height="90" alt="img14_thumb" class="thumb" name="mainImage" />