サムネイルのマウスオーバーでメイン画像を切り替え+メッセージ表示 jquery.tgImageChangeV2.1.js

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

Satoさんコメント用 複数設置+コメント表示 サンプル1

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

複数設置+コメント表示 サンプル2

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

使い方

ver.2 - 一画面に複数個を設置できるよう、画像オプション、スクリプトオプションを変更。
ver2.1 - メッセージ表示機能を追加。スクリプトオプションを変更。

ヘッダ記述方法

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

<script>
jQuery(function(){

$(this).tgImageChange({

selectorThumb : '.thumb', // ←★サムネイル画像セレクタ(ドットは必須)

fadeOutTime : 50, // ←★カーソルON時のアニメーション時間

fadeInTime : 200, // ←★カーソルOFF時のアニメーション時間

thumbCssBorder : '2px solid #ff5a71', // ←★カーソルON時のサムネイル枠CSS

messageClass : 'messageBox', // ←★メッセージボックスのclass名

});

});

画像記述例

メイン画像のclass名と同名のname名をサムネイル画像に付与することにより、関連付けられます。（赤色）
サムネイル画像のclass名は、スクリプトのオプションで指定可能です。（青色）
メッセージはリスト形式で記述。ulタグに対象となるメイン画像と同じclass名を付与し、スクリプトへのオプションで指定してください。（黄色）

●メイン画像

<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" />

●メッセージ

<div class="messageBox">

<ul class="mainImage">

<li>テキストを表示します(デフォルト文)</li>

<li class="note2 hide">煙草と灰皿</li>

<li class="note3 hide">ライター？</li>

<li class="note7 hide">サボテン！</li>

<li class="note8 hide"><del>にーちゃん</del>ねーちゃん</li>

<li class="note14 hide">月とお城</li>

</ul>

</div>