コピペで完結!モーダルウインドウ#13【画像ギャラリーをモーダルで表示】

html/css/js

画像ギャラリーをモーダルで表示

サムネイル画像をクリックすると、拡大画像がモーダルで表示されるギャラリー機能を実装します。
シンプルなHTML・CSS・JavaScriptだけで構成し、閉じるボタンや背景クリックでもモーダルを閉じられる仕様です。
そのままコピペで利用できる実用的なサンプルコードです。

コードについて 本記事のコードは AI(ChatGPT)による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

下のサムネイル画像をクリックすると、モーダルで拡大画像が表示されます。
表示中は左右のボタンで前後の画像に移動でき、背景クリックや「×」ボタン、Escキーで閉じることができます。
モーダルが開いている間は背景のスクロールも停止する仕様です。

コードをコピーして使おう!

/* ▼CSS(#gallery-section スコープ推奨)
   - すべてのスタイルを #gallery-section 内に限定して
     他のページ要素と衝突しないようにしています
*/

/* サムネイル一覧のレイアウト */
#gallery-section .gallery-grid{
  display:grid; /* グリッドレイアウトを使用 */
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); /* 最小120pxで自動分割 */
  gap:12px; /* サムネイル間の余白 */
  margin:12px 0 20px; /* 上下に余白を追加 */
}

/* サムネイル要素(個々の枠) */
#gallery-section .thumb{
  position:relative; /* 子要素(ボタン)を絶対配置するため */
  border-radius:10px; /* 角丸 */
  overflow:hidden; /* 画像が枠からはみ出さないように */
  background:#f1f5f9; /* 画像が遅延読み込み中でも背景色が見えるように */
  aspect-ratio:4/3; /* 横4:縦3の比率を維持 */
}

/* サムネイル画像 */
#gallery-section .thumb img{
  width:100%; height:100%; /* 枠いっぱいに拡大縮小 */
  object-fit:cover; /* 枠に合わせて切り取り */
  display:block; /* 行間の余白を消すためブロック化 */
  transition: transform .2s ease, opacity .2s ease; /* ホバー時のアニメーション */
}
/* サムネイル画像のホバー演出(少し拡大&透明度ダウン) */
#gallery-section .thumb:hover img{ 
  transform:scale(1.025); 
  opacity:.9; 
}

/* サムネイル上の透明ボタン
   - img 要素の上に invisible ボタンを置いてクリック可能にする
*/
#gallery-section .thumb button{
  position:absolute; inset:0; /* 親の枠いっぱいに広げる */
  background:transparent; border:none; /* 背景・枠を消す */
  cursor:pointer; /* マウスカーソルを指マークに */
}

/* モーダル背景(オーバーレイ部分) */
#gallery-section .overlay{
  position:fixed; inset:0; /* 画面全体に固定配置 */
  background:rgba(2,8,23,.82); /* 半透明の黒に近い背景 */
  display:none; /* 初期は非表示 */
  place-items:center; /* 中央に配置(grid特性) */
  z-index:9999; /* 最前面に表示 */
}
/* 表示状態(.active が付与された時) */
#gallery-section .overlay.active{ 
  display:grid; 
}

/* モーダル内のラッパー(ライトボックス本体) */
#gallery-section .lightbox{
  position:relative; /* 子要素のボタン配置の基準にする */
  max-width:min(92vw,920px); /* 画面幅の92%か最大920px */
  max-height:88vh; /* 画面高の88%を上限にする */
}

/* 拡大画像 */
#gallery-section .lightbox img{
  display:block;
  max-width:100%; max-height:88vh; /* ラッパー内で縮小 */
  border-radius:12px; /* 角丸 */
  box-shadow:0 24px 60px rgba(0,0,0,.35); /* 影を付ける */
  background:#fff; /* 透過画像に備えて白背景 */
}

/* 閉じるボタン */
#gallery-section .lb-close{
  position:absolute; top:10px; right:10px; /* 右上に固定 */
  border:none; background:#fff; color:#0f172a; /* 白地に濃紺文字 */
  padding:6px 10px; border-radius:8px; /* 適度な余白と角丸 */
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2); /* 少し浮いているような影 */
}
/* ホバー時に色を薄グレーに */
#gallery-section .lb-close:hover{ 
  background:#f1f5f9; 
}

/* 前後ナビゲーションボタン */
#gallery-section .lb-prev,
#gallery-section .lb-next{
  position:absolute; top:50%; transform:translateY(-50%); /* 垂直中央に配置 */
  border:none; background:#fff; color:#0f172a; /* 白地に濃紺文字 */
  padding:10px 12px; border-radius:999px; /* 丸ボタンにする */
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25); /* 影を付けて浮かせる */
}
/* 左右の位置 */
#gallery-section .lb-prev{ left:10px; }
#gallery-section .lb-next{ right:10px; }
/* ホバー時に背景色をグレーに */
#gallery-section .lb-prev:hover, 
#gallery-section .lb-next:hover{ 
  background:#f1f5f9; 
}

/* キャプション(画像タイトルなどを表示) */
#gallery-section .lb-caption{
  margin-top:10px;
  color:#e2e8f0; /* 淡いグレーで落ち着いた印象に */
  text-align:center;
  font-size:12px;
}

/* 背景スクロール抑止
   - モーダルが開いているときに body に .modal-lock を付けて
     ページ全体のスクロールを止める
*/
body.modal-lock{ 
  overflow:hidden; 
}

コメント