【jQuery】マウスオーバーでシンプルなサムネイル画像の切り替え（複数要素対応版）

2018年9月13日jQuery

マウスオーバーでシンプルなサムネイル画像の切り替え

ネットショップなどでよく見られる、複数のサムネイル画像にマウスオーバー（スマホであればタップ）するとメイン画像が切り替わるスクリプトをjQueryで用意しました。１ページ内に同じ仕組みが複数ある場合も動作するようになっています。少ないコードで可能な限りシンプルな動作になっているので、サクッと導入したい場合は是非一度使ってみてください。

DEMO

画像切り替え動作デモ

どのような動きをするか見てもらうほうが早いと思いますので、プログラムの動作デモページを用意しました。下記リンク先をご確認下さい。

» 動作デモページはこちら

このあとご紹介する設置方法で順番にコードをコピーするか、デモページのソースを丸々コピーして動かしてみて下さい。

設置方法

jQuery本体の読み込み

CDNで配布されています。下記コードをそのまま＜head＞内に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery実行コード

こちらのコードをjQuery本体よりも下部に記述します。

<script>
$(function(){
    $('.subimage li').hover(function(){
        //オーバーしたliのインデックスを取得
        var index = $('.subimage li').index(this);
        //オーバーした画像URLを取得
        var imageurl = $('.subimage li').eq(index).find('img').attr('src');
        //ulのクラス名を取得（空白で分割）
        className = $(this).parent().attr('class').split(" ");
        //元のメイン画像を保存しておく
        defaultImage = $('img.mainimage.'+className[1]).attr('src');
        $('img.mainimage.'+className[1]).attr('src',imageurl);
    },function(){
        $('img.mainimage.'+className[1]).attr('src',defaultImage);
    });
});
</script>

HTML

上記デモページの、BOX01、BOX02の２つのボックスを表示しています。中のテキストや画像URI、クラス名などは適宜変更してください。

<div class="box_around">
	<div class="main_image_box">
		<img src="../img/20180913/box01_img01.jpg" alt="" class="mainimage img01">
	</div>				
	<!-- ***** サムネイル ***** -->
	<div class="detail">
		<ul class="subimage img01">
			<li><img src="../img/20180913/box01_img01.jpg"></li>
			<li><img src="../img/20180913/box01_img02.jpg"></li>
			<li><img src="../img/20180913/box01_img03.jpg"></li>
		</ul>
	</div><!-- .detail end -->
</div><!-- .box_around end -->

<div class="box_around">
	<div class="main_image_box">
		<img src="../img/20180913/box02_img01.jpg" alt="" class="mainimage img02">
	</div>			
	<!-- ***** サムネイル ***** -->
	<div class="detail">
		<ul class="subimage img02">
			<li><img src="../img/20180913/box02_img01.jpg"></li>
			<li><img src="../img/20180913/box02_img02.jpg"></li>
			<li><img src="../img/20180913/box02_img03.jpg"></li>
		</ul>
	</div><!-- .detail end -->
</div><!-- .box_around end -->

HTML記述のポイント

各ボックスのいちばん大枠はbox_aroundクラスです。３つ、４つと増やす場合はbox_aroundからコピーしてください。

切り替えるメインの大きな画像（img要素）と、サムネイル画像を並べているul要素には同じクラス名を付与します。
※上記コードであれば３行目と７行目のクラス名（BOX01内）、１７行目と２１行目のクラス名（BOX02内）がそれぞれ同じクラス名を指定しています。

CSS

こちらも既存クラスなどの状況に合わせてカスタマイズしてください。

img{ width:100%; }
.box_around{
    width:30%;
    float:left;
    margin-right:15px;
    margin-bottom:30px;
}
.detail ul{
    display:inline-block;
    width:100%;
    padding:0;
    margin:0;
}
.detail ul li{
    display:inline-block;
    width:33.3%;
    float:left;
}
.detail ul li img{
    max-width:95%;
    margin:0 auto;
    display:block;
}

以下、各コードの簡単な解説

jQuery実行コードの部分

<script>
$(function(){
    $('.subimage li').hover(function(){
        //オーバーしたliのインデックスを取得
        var index = $('.subimage li').index(this);
        //オーバーした画像URLを取得
        var imageurl = $('.subimage li').eq(index).find('img').attr('src');
        //ulのクラス名を取得（空白で分割）
        className = $(this).parent().attr('class').split(" ");
        //元のメイン画像を保存しておく
        defaultImage = $('img.mainimage.'+className[1]).attr('src');
        $('img.mainimage.'+className[1]).attr('src',imageurl);
    },function(){
        $('img.mainimage.'+className[1]).attr('src',defaultImage);
    });
});
</script>

改めて自分のコードを読んでいるともっと簡単な処理にできたとは思うのですが、基本的にサムネイル画像を並べているリストの部分は、＜ul class=”subimage [画像グループごとに個別のクラス名]”＞を固定で決め打ちしてクラス名を付けています。

９行目で.subimageのクラス名を探し、その後ろに付いている個別のクラス名と同じ名前が付いているメイン画像を探して、画像URIを書き換えています。

１１行目で変数defaultImageに元のメイン画像を保存しておき、マウスオーバーが離れたときに１４行目でその元画像を呼び出しています。

まとめ

外のブログで配られている画像切り替えのライブラリは、機能が多い反面自分でカスタマイズし辛いことがあったりプログラム自体が少し重かったり、動きを完全に理解できていないためスタイルシートのカスタマイズや修正に苦戦することがあります。jQueryの勉強がてら自分で設置すると動作の全体の流れが把握でき、今後さらに複雑な機能を自分で追加することも可能なので一度組んでみることもオススメです。

コードの間違い、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。

jQueryjavascript, jQuery, カスタマイズ

Posted by シュウ