サムネイルをクリックすると画像を拡大表示する動作の実装【jQuery】

『サムネイル画像をクリックすると、モーダルウィンドウで画像を拡大表示する動作』を実装する手法。クリックするまで拡大画像を読み込まない、JavaScriptライブラリを使用しない等を考慮している。

2026. 03. 20

実装する内容の詳細
ソースコード
『index.html』について
『script.js』について
『style.css』について

実装する内容の詳細

『サムネイル画像をクリックすると、モーダルウィンドウでサムネイル画像に対応する画像を拡大表示する動作』を実装する。

以下は実装に伴い考慮した内容。

モーダルウィンドウで表示する画像はクリック時まで読み込まない
(通信量の節約)
JavaScriptライブラリを使用しない
htmlファイルで画像パスを複数記述しない
親要素に『overflow: hidden;』がある場合にモーダルウィンドウが影響を受けないようにする
(スライダーの中などにも実装しやすくなる)

ソースコード

以下はソースコードの具体例。
htmlファイルは以下に記述しているjsファイルやcssファイルの他に、jQueryを読み込んでいる。
また、各ソースコードの詳細についてはさらに下方を参照のこと。

index.html

<div>
　<figure class="modal-open img-zoom"><img src="images/blog202603_tmb.jpg" alt="説明文"></figure>
　<div class="modal">
　　<div class="modal-area">
　　　<p class="title">タイトルを入れる</p>
　　</div>
　</div>
</div>

script.js

//ーーモーダルウィンドウの制御ーー
$(function() {

　//サムネイルクリック時
　$(".modal-open").click(function(){
　　//モーダルウィンドウに表示する内容をコピーして<main>要素内の先頭に設置する
　　$(this).next(".modal").clone().prependTo("main").addClass("modal-totop");

　　//フェードインをスムーズにするための遅延
　　setTimeout(function() {
　　　$(".modal-totop").addClass("active");
　　}, 5 );

　});

　//モーダルウィンドウにて、画像以外をクリックでモーダルウィンドウを閉じる
　$(document).click(function(i){
　　if ($(".modal-totop").hasClass("active")) {
　　　if(!$(i.target).closest("img").length) {
　　　　$(".modal").removeClass("active");

　　　　//処理を前後させないための遅延
　　　　setTimeout(function() {
　　　　　$(".modal.modal-totop").remove();
　　　　}, 200 );

　　　}
　　}
　});

});


//ーーサムネイル画像クリックで拡大する動作の制御ーー
$(".img-zoom").on("click", function() {

　//クリックしたサムネイルに対応する『モーダルウィンドウで表示する要素』を指す変数
　var classModal = $(this).next();

　//拡大して表示する画像の準備
　//(一度行った場合は以下の処理を重複して行わない)
　if(!classModal.find("figure").length) {
　　//画像を表示するための要素をモーダルウィンドウ内に作成
　　classModal.children().prepend("<figure><img></figure>");
　　//サムネイル画像のsrcを取得する変数
　　var img_zoom_src = $(this).children("img").attr("src");
　　//取得したsrc中の『tmb』を『show』に書き換える
　　var img_zoom_src_change = img_zoom_src.replace("tmb", "show");
　　//モーダルウィンドウ内に作成した画像の要素にsrcを設定する
　　classModal.find("img").attr("src", img_zoom_src_change);
　}

　//クリック時の画面サイズを取得
　var windowWidth = $(window).outerWidth(true);
　var windowHeight = $(window).outerHeight(true);
　//モーダルウィンドウで画像を表示するときの上下左右の余白を設定
　var modal_padding_width = 40;
　var modal_padding_height = 250;
　//以上より画像を表示するサイズを決定
　var maxwidth = windowWidth - modal_padding_width;
　var maxheight = windowHeight - modal_padding_height;
　classModal.find("img").css("max-width", maxwidth + "px").css("max-height", maxheight + "px");

});

style.css

.modal-open {
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  padding: 110px 20px 0;
  overflow: auto;
  transition: .3s;
  box-sizing: border-box;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-area {
  width: fit-content;
  margin: auto;
}

.modal-totop .modal-area > figure {
  position: relative;
  margin-bottom: 0;
  width: fit-content;
}

.modal-totop .modal-area > figure img {
  width: auto;
  height: auto;
  max-width: 100%;
}

.modal-totop .modal-area > p.title {
  z-index: 91;
  position: relative;
  margin-top: 4px;
  margin-bottom: 0;
  color: white;
}

.modal-area img {
  background-color: white;
}

『index.html』について

<figure>

<figure>にはサムネイル画像を設定する。
ここでは画像のファイル名を『blog202603_tmb』としているが、『tmb』を必ず含んでいれば他の表記は自由。
モーダルウィンドウで表示したい画像はサムネイル画像と同じ階層に設置し、ファイル名を『blog202603_show』とする。サムネイル画像のファイル名の『tmb』の箇所を『show』に変更したファイル名にすること。

<div class="modal-area">

<div class="modal">以下はモーダルウィンドウで表示する要素。
<p class="title">にはキャプション等を入力するが、必要なければ<p class="title">は削除して良い。

『script.js』について

//モーダルウィンドウに表示する内容をコピーして<main>要素内の先頭に設置する

親要素の『overflow: hidden;』の影響を回避するため、モーダルウィンドウの内容は表示時のみ上層に設置している。
ここでは<main>要素内の先頭としているが、<body>でも良い。『overflow: hidden;』等の影響を受けないのであればどこでも良い。

//クリックしたサムネイルに対応する『モーダルウィンドウで表示する要素』

<div class="modal">を指す。

//拡大して表示する画像の準備

モーダルウィンドウで表示する画像はindex.htmlファイルには記述せず、ここで作成する。これにより、通信量とhtmlファイルでの記述量を抑えている。
サムネイル画像のファイルパスをコピーした上で『tmb』の部分を『show』に変更することで、モーダルウィンドウで表示する画像を作成しているため、ファイル名の管理に注意すること。

//モーダルウィンドウで画像を表示するときの上下左右の余白を設定

パソコンでの表示とスマホでの表示では、見やすい余白の程度が変わるため、必要に応じてスマホ時の分岐処理を付け加えること。

『style.css』について

.modal-totop .modal-area > figure img

タブレット端末での表示時に、画像の比率が崩れるのを回避する。