画像をモーダルウインドウに拡大表示する方法
画像をクリックすると、モーダルウインドウ内へ大きく表示する方法を紹介します。このサンプルでは、ページ内に並べたサムネイル画像をクリックすると画面中央にモーダルウインドウが開き、選択した画像を拡大して確認できます。小さな画像を一覧で見せながら、必要な画像だけを大きく表示したい場合に利用しやすい構成です。
ECサイトの商品画像、作品ギャラリー、施工事例、旅行写真、管理画面での画像確認など、サムネイルから詳細画像を確認したい場面に適しています。モーダル表示中は背景を暗くして画像へ視線を集め、右上の閉じるボタンをクリックすると元の一覧へ戻れます。ページを移動せずに画像を確認できるため、複数画像を見比べる場合にも使いやすくなります。
HTMLではサムネイル画像と拡大表示する画像を変更でき、CSSでは画像一覧の列数、モーダルの最大横幅、背景の濃さ、画像の角丸、影などを調整できます。JavaScriptではクリックした画像のURLと代替テキストを取得してモーダル内へ設定し、表示・非表示を切り替えます。画面幅が狭い場合は画像一覧の列数を変更するため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
画像をクリックすると、モーダルウインドウに拡大表示します。
画像をクリックするとモーダルウインドウが開き、選択した画像を大きく表示できます。右上の「×」をクリックすると閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>画像をモーダルウインドウに拡大表示</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 画像一覧全体 -->
<div class="image-modal-zoom_wrap">
<!-- タイトル -->
<div class="image-modal-zoom_title">
画像をモーダルで拡大表示
</div>
<!-- 説明文 -->
<p class="image-modal-zoom_text">
画像をクリックすると、モーダルウインドウに拡大表示します。
</p>
<!-- サムネイル画像一覧 -->
<div class="image-modal-zoom_gallery">
<!-- 画像1 -->
<button
class="image-modal-zoom_button"
type="button"
data-image="images/image1.png"
aria-label="画像1を拡大表示">
<img
class="image-modal-zoom_thumb"
src="images/image1.png"
alt="画像1">
</button>
<!-- 画像2 -->
<button
class="image-modal-zoom_button"
type="button"
data-image="images/image2.png"
aria-label="画像2を拡大表示">
<img
class="image-modal-zoom_thumb"
src="images/image2.png"
alt="画像2">
</button>
<!-- 画像3 -->
<button
class="image-modal-zoom_button"
type="button"
data-image="images/image3.png"
aria-label="画像3を拡大表示">
<img
class="image-modal-zoom_thumb"
src="images/image3.png"
alt="画像3">
</button>
</div>
</div>
<!-- モーダル背景 -->
<div
class="image-modal-zoom_overlay"
id="image-modal-zoom-overlay"
aria-hidden="true">
<!-- モーダル本体 -->
<div
class="image-modal-zoom_modal"
role="dialog"
aria-modal="true"
aria-label="拡大画像">
<!-- 閉じるボタン -->
<button
class="image-modal-zoom_close"
id="image-modal-zoom-close"
type="button"
aria-label="モーダルを閉じる">
×
</button>
<!-- 拡大画像 -->
<img
class="image-modal-zoom_large"
id="image-modal-zoom-large"
src="images/image1.png"
alt="画像1">
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、拡大表示する3枚の画像で構成されています。HTMLでサムネイル画像とモーダルウインドウを配置し、CSSで画像一覧やモーダル背景、拡大画像、閉じるボタンのデザインを設定します。JavaScriptではクリックしたサムネイル画像を取得し、対応する画像をモーダルウインドウ内へ表示します。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
└── image3.png
各ファイルの役割
index.htmlは画像一覧とモーダルウインドウを構成するファイルです。サムネイル画像のsrcとdata-imageを変更すると、一覧に表示する画像とクリック後に拡大表示する画像を変更できます。画像を追加する場合は、同じ形式のbutton要素とimg要素を追加します。
style.cssは画像一覧とモーダルウインドウのデザインを設定するファイルです。全体の横幅、画像の列数、画像同士の間隔、モーダル背景の色、モーダル本体のサイズ、余白、角丸、影、拡大画像の最大高さなどを変更できます。
script.jsはサムネイル画像をクリックしたときにモーダルウインドウを表示し、クリックした画像に対応する画像へ切り替える処理を行います。また、モーダル右上の「×」ボタンをクリックするとモーダルウインドウを閉じます。
imagesフォルダには、一覧表示とモーダルウインドウで使用するimage1.png、image2.png、image3.pngを配置します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sampleフォルダ内にimagesフォルダを作成します。imagesフォルダへimage1.png、image2.png、image3.pngを配置したあと、sample/index.htmlをブラウザで開いてください。表示されたサムネイル画像をクリックすると、選択した画像がモーダルウインドウ内へ拡大表示されます。「×」ボタンをクリックするとモーダルウインドウが閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、表示する画像、画像の代替テキスト、画像の件数を変更できます。サムネイル画像のsrcとdata-imageへimagesフォルダ内の画像パスを指定することで、用途に合わせた画像へ差し替えられます。
style.cssでは画像一覧全体の横幅や余白、サムネイル画像の列数や間隔、角丸、モーダル背景の濃さ、モーダル本体の横幅、余白、角丸、影、閉じるボタンのサイズ、拡大画像の最大高さなどを変更できます。
数値調整
style.css
max-width:760px;
画像一覧全体の最大横幅です。値を大きくすると全体が横へ広がり、小さくするとコンパクトになります。
padding:32px;
画像一覧全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
画像一覧全体の角丸です。値を大きくすると丸みが強くなります。
gap:16px;
サムネイル画像同士の間隔です。値を大きくすると画像同士の間隔が広がります。
transition:transform .3s ease;
サムネイル画像へマウスを重ねたときの変化時間です。.3sを大きくするとゆっくり、小さくすると速く変化します。
transform:scale(1.05);
サムネイル画像へマウスを重ねたときの拡大率です。1.05を大きくすると拡大量が大きくなります。
background:rgba(15,23,42,.65);
モーダル背景の色と透明度です。.65を大きくすると背景が濃くなり、小さくすると薄くなります。
max-width:900px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横へ広がります。
padding:24px;
モーダル本体の内側余白です。値を大きくすると拡大画像とモーダル外枠の間隔が広がります。
width:44px;・height:44px;
閉じるボタンの大きさです。値を大きくすると「×」ボタン全体が大きくなります。
max-height:80vh;
拡大画像の最大高さです。画面高さの80%以内に画像を収めます。値を変更すると画像が使用できる最大高さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthによって、画像一覧とモーダル本体が画面幅に合わせて縮小されます。640px以下ではgrid-template-columns:1fr;へ変更してサムネイル画像を1列表示にし、全体とモーダルの余白も小さくしています。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント