Javascript,jQuery

jQueryでサムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプトを書いてみた

2016/12/14

タイトルだけでは分かりにくいですが、ECサイトの詳細画面などでよくあるタイプのものです。
いつもの様に勉強がてら作ってみましたが、意外と使えるのではなかろうかと思っています。
そういうわけで、何らかの商品管理画面を作った際には楽に使えるよう、久しぶりにプラグイン化もしてみました。
そんな感じで、今回もスクリプトを晒してみたいと思います。

サムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプト

動作のイメージ

jquerytgimagechange_image

画像の命名規則

画像ファイル名はメイン画像用は

filename1.jpg
filename2.jpg

とし、サムネイル画像は

filename1_thumb.jpg
filename2_thumb.jpg

という感じの命名規則を設けています。
「_thumb」部分は、プラグイン版では変更できるようにしています。

スクリプトコード

HTML

ではHTMLから。

メイン画像を置き、罫線に下に、サムネイル画像を置いているだけです。
メイン画像のクラスを「mainImage」、サムネイル画像のクラス名を「thumb」とします。

CSS

お次はCSS。

CSSは、メインイメージ、サムネイルのボーダーを書いているだけです。
カーソルが乗った時に、ボーダー色を変更させています。

JS

ではメインのスクリプトです。

4行目でサムネイルのファイル名から、メイン画像のファイル名を取得し、
7行目からフェードインしながら、入れ替える画像を表示。
14行目で、カーソルが乗っているサムネイルの枠を #333 から #ff5a71 に変更。
18行目から、マウスアウトした際にサムネイルの枠色を元の黒に戻しています。

デモ

プラグイン版

上記スクリプトをプラグインとしてみました。設定は以下の様な感じで。
HTMLの記述例です。

メイン画像、サムネイル画像のクラス名(セレクタ名)サムネイルの枠設定などが変更できます。
アニメーション時間を両方共「0」とすると、パラパラと切り替わります。

ダウンロード

右クリックの「対象をファイルに保存」などで保存してください。

2013.08.21 追記

うふふ さんコメント用

デモ

デモはこちらから(index3.html が別ウィンドウで開きます)

スクリプト

2014.04.12 追記

04 さんコメント用

デモ

デモはこちらから(index4.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)

よくわかるJavaScriptの教科書

よくわかるJavaScriptの教科書

たにぐち まこと

価格 : 2,678円

-Javascript,jQuery
-, , , , ,