jQueryでサムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプトを書いてみた
2018/09/10
タイトルだけでは分かりにくいですが、ECサイトの詳細画面などでよくあるタイプのものです。
いつもの様に勉強がてら作ってみましたが、意外と使えるのではなかろうかと思っています。
そういうわけで、何らかの商品管理画面を作った際には楽に使えるよう、久しぶりにプラグイン化もしてみました。
そんな感じで、今回もスクリプトを晒してみたいと思います。
サムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプト
動作のイメージ
画像の命名規則
画像ファイル名はメイン画像用は
filename1.jpg
filename2.jpg
とし、サムネイル画像は
filename1_thumb.jpg
filename2_thumb.jpg
という感じの命名規則を設けています。
「_thumb」部分は、プラグイン版では変更できるようにしています。
スクリプトコード
HTML
ではHTMLから。
|
1 2 3 4 5 6 7 8 9 |
<img src="./img/img2.jpg" width="350" height="350" alt="img2" class="mainImage" /> <hr /> <p>サムネイルにマウスカーソルを合わせると画像が入れ替わります</p> <img src="./img/img2_thumb.jpg" width="90" height="90" alt="img2_thumb" class="thumb" /> <img src="./img/img3_thumb.jpg" width="90" height="90" alt="img3_thumb" class="thumb" /> <img src="./img/img7_thumb.jpg" width="90" height="90" alt="img7_thumb" class="thumb" /> <img src="./img/img8_thumb.jpg" width="90" height="90" alt="img8_thumb" class="thumb" /> <img src="./img/img14_thumb.jpg" width="90" height="90" alt="img14_thumb" class="thumb" /> |
メイン画像を置き、罫線に下に、サムネイル画像を置いているだけです。
メイン画像のクラスを「mainImage」、サムネイル画像のクラス名を「thumb」とします。
CSS
お次はCSS。
|
1 2 3 4 5 6 7 |
.mainImage{ border: 2px solid #333; } .thumb{ border: 2px solid #333; } |
CSSは、メインイメージ、サムネイルのボーダーを書いているだけです。
カーソルが乗った時に、ボーダー色を変更させています。
JS
ではメインのスクリプトです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() { $('img.thumb').mouseover(function(){ // "_thumb"を削った画像ファイル名を取得 var selectedSrc = $(this).attr('src').replace(/^(.+)_thumb(\.gif|\.jpg|\.png+)$/, "$1"+"$2"); // 画像入れ替え $('img.mainImage').stop().fadeOut(50, function(){ $('img.mainImage').attr('src', selectedSrc); $('img.mainImage').stop().fadeIn(200); } ); // サムネイルの枠を変更 $(this).css({"border":"2px solid #ff5a71"}); }); // マウスアウトでサムネイル枠もとに戻す $('img.thumb').mouseout(function(){ $(this).css({"border":""}); }); }); |
4行目でサムネイルのファイル名から、メイン画像のファイル名を取得し、
7行目からフェードインしながら、入れ替える画像を表示。
14行目で、カーソルが乗っているサムネイルの枠を #333 から #ff5a71 に変更。
18行目から、マウスアウトした際にサムネイルの枠色を元の黒に戻しています。
デモ
サムネイルのマウスオーバーでメイン画像を切り替える
https://lightning-bolt.xyz/js/jquery.tgImageChange/index2.html
https://lightning-bolt.xyz/js/jquery.tgImageChange/index2.html
プラグイン版
上記スクリプトをプラグインとしてみました。設定は以下の様な感じで。
HTMLの記述例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="../js/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageChange.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageChange({ selectorMain : '.mainImage', // メイン画像セレクタ selectorThumb : '.thumb', // サムネイル画像セレクタ fadeOutTime : 50, // カーソルON時のアニメーション時間 fadeInTime : 200, // カーソルOFF時のアニメーション時間 thumbCssBorder : '2px solid #ff5a71' // カーソルON時のサムネイル枠CSS }); }); </script> |
メイン画像、サムネイル画像のクラス名（セレクタ名）サムネイルの枠設定などが変更できます。
アニメーション時間を両方共「0」とすると、パラパラと切り替わります。
ダウンロード
右クリックの「対象をファイルに保存」などで保存してください。
2013.08.21 追記
うふふ さんコメント用
デモ
デモはこちらから（index3.html が別ウィンドウで開きます）
スクリプト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author" content=""> <meta name="description" content=""> <style type="text/css"> h1{ font-size: 1em; font-weight: normal; } p{ font-size: 1em; } .mainImage{ border: 2px solid #333; } .thumb{ border: 2px solid #333; } .invisible{ display: none; } </style> <script src="../js/jquery1.8.1.min.js"></script> <script type="text/javascript"> $(function() { $('img.thumb').mouseover(function(){ // "_thumb"を削った画像ファイル名を取得 var selectedSrc = $(this).attr('src').replace(/^(.+)_thumb(\.gif|\.jpg|\.png+)$/, "$1"+"$2"); // 表示させる"note番号"を取得 var targetNote = $(this).attr('rel'); // 画像入れ替え $('img.mainImage').stop().fadeOut(50, function(){ $('img.mainImage').attr('src', selectedSrc); $('img.mainImage').stop().fadeIn(200); } ); // サムネイルの枠を変更 $(this).css({"border":"2px solid #ff5a71"}); // テキストの class="invisible" を削除 $('p#'+targetNote).removeClass('invisible'); // デフォルト表示のテキストに class="invisible" 付加 $('p#note0').addClass('invisible'); }); // マウスアウトでサムネイル枠もとに戻す $('img.thumb').mouseout(function(){ $(this).css({"border":""}); }); // マウスアウトでテキストを隠す $('img.thumb').mouseout(function(){ $('p.viewText').addClass('invisible'); $('p#note0').removeClass('invisible'); }); }); </script> <title>サムネイルのマウスオーバーでメイン画像を切り替える</title> </head> <body> <h1>サムネイルのマウスオーバーでメイン画像を切り替える</h1> <img src="./img/img2.jpg" width="350" height="350" alt="img2" class="mainImage" /> <!-- テキスト表示させる内容 --> <p id="note0" class="viewText">テキストを表示します</p> <p id="note2" class="viewText invisible">灰皿の画像</p> <p id="note3" class="viewText invisible">ライター</p> <p id="note7" class="viewText invisible">サボテン！</p> <p id="note8" class="viewText invisible">にーちゃん</p> <p id="note14" class="viewText invisible">月と城</p> <hr /> <p>サムネイルにマウスカーソルを合わせると画像が入れ替わります</p> <img src="./img/img2_thumb.jpg" width="90" height="90" alt="img2_thumb" class="thumb" rel="note2" /> <img src="./img/img3_thumb.jpg" width="90" height="90" alt="img3_thumb" class="thumb" rel="note3" /> <img src="./img/img7_thumb.jpg" width="90" height="90" alt="img7_thumb" class="thumb" rel="note7" /> <img src="./img/img8_thumb.jpg" width="90" height="90" alt="img8_thumb" class="thumb" rel="note8" /> <img src="./img/img14_thumb.jpg" width="90" height="90" alt="img14_thumb" class="thumb" rel="note14" /> </body> </html> |
2014.04.12 追記
04 さんコメント用
デモ
デモはこちらから（index4.html が別ウィンドウで開きます）
スクリプト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author" content=""> <meta name="description" content=""> <style type="text/css"> h1{ font-size: 1em; font-weight: normal; } p{ font-size: 1em; } .mainImage{ border: 2px solid #333; } .thumb{ border: 2px solid #333; } .invisible{ display: none; } </style> <script src="../js/jquery1.8.1.min.js"></script> <script type="text/javascript"> $(function() { $('img.thumb').mouseover(function(){ // "_thumb"を削った画像ファイル名を取得 var selectedSrc = $(this).attr('src').replace(/^(.+)_thumb(\.gif|\.jpg|\.png+)$/, "$1"+"$2"); // 表示させる"note番号"を取得 var targetNote = $(this).attr('rel'); // 画像入れ替え $('img.mainImage').stop().fadeOut(50, function(){ $('img.mainImage').attr('src', selectedSrc); $('img.mainImage').stop().fadeIn(200); } ); // サムネイルの枠を変更 $(this).css({"border":"2px solid #ff5a71"}); // 対象テキストの class="invisible" を削除して表示 $('p#'+targetNote).removeClass('invisible'); // 対象テキスト以外に class="invisible" 付加して非表示 $('div.messageBox p').not('#'+targetNote).addClass('invisible'); }); // マウスアウトでサムネイル枠を元に戻す $('img.thumb').mouseout(function(){ $(this).css({"border":""}); }); }); </script> <title>サムネイルのマウスオーバーでメイン画像を切り替える</title> </head> <body> <h1>サムネイルのマウスオーバーでメイン画像を切り替える</h1> <!-- デフォルト画像 --> <img src="./img/img2.jpg" width="350" height="350" alt="img2" class="mainImage" /> <!-- 表示させるテキスト --> <div class="messageBox"> <p id="note0" >テキストを表示します(デフォルト文)</p> <p id="note2" class="invisible">灰皿の画像</p> <p id="note3" class="invisible">ライター</p> <p id="note7" class="invisible">サボテン！</p> <p id="note8" class="invisible"><del>にーちゃん</del>ねーちゃん</p> <p id="note14" class="invisible">月と城</p> </div> <hr /> <p>サムネイルにマウスカーソルを合わせると画像が入れ替わります</p> <img src="./img/img2_thumb.jpg" width="90" height="90" alt="img2_thumb" class="thumb" rel="note2" /> <img src="./img/img3_thumb.jpg" width="90" height="90" alt="img3_thumb" class="thumb" rel="note3" /> <img src="./img/img7_thumb.jpg" width="90" height="90" alt="img7_thumb" class="thumb" rel="note7" /> <img src="./img/img8_thumb.jpg" width="90" height="90" alt="img8_thumb" class="thumb" rel="note8" /> <img src="./img/img14_thumb.jpg" width="90" height="90" alt="img14_thumb" class="thumb" rel="note14" /> </body> </html> |
2014.05.13追記
Satoさんコメント用
デモ
デモはこちらから（index5.html が別ウィンドウで開きます）
Satoさんのコメントを受け、こそっとバージョンバップ版を作成しました。
関連付けを明示的に行うことにより、同画面に複数個の表示を可能にしています。
詳細はデモ画面、デモ画面のソースを確認して下さい。
ダウンロード
右クリックの「対象をファイルに保存」などで保存してください。
ダウンロード（jquery.tgImageChangeV2.js）
2014.05.20追記
デモ
デモはこちらから（index6.html が別ウィンドウで開きます）
バージョン2に、メッセージ機能(3行)を追加してみました。バージョンは2.1です。
スクリプトのオプションを1つ追加しています。
メッセージも画像同様、同画面に複数の設置が可能となっています。
詳しくはデモのソース、スクリプトのソースを確認で。
ダウンロード
右クリックの「対象をファイルに保存」などで保存してください。
ダウンロード（jquery.tgImageChangeV2.1.js）