JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptで作るモーダル式画像ギャラリーの実装方法

CSSとJavaScriptを組み合わせれば、サムネイル画像をクリックすると拡大画像がポップアップ表示される「ライトボックス型」の画像ギャラリーを簡単に実装できます。この記事では、実際に動作するサンプルコードをもとに、その仕組みと実装のポイントをわかりやすく解説します。

完成イメージ

ページ上に並べた複数のサムネイル画像をクリックすると、モーダルウィンドウが開いて拡大画像が表示されます。右上の「×」ボタンをクリックするとモーダルが閉じる、シンプルながら実用的なギャラリーです。

サンプルコード

以下が、CSSとJavaScriptを使ってモーダル式画像ギャラリーを作成するコード例です。

HTML・CSS・JavaScript全体のコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
    box-sizing: border-box;
}
h1 {
    text-align: center;
}
.ImgThumbnail {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    height: 250px;
    width: 250px;
}
.ImgThumbnail:nth-of-type(1) {
    margin-left: 20%;
}
.modal {
    display: none;
    position: relative;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 60%;
    overflow: auto;
}
.modalImage {
    margin: auto;
    display: block;
    width: 50%;
    height: 60%;
    max-width: 700px;
}
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
.close {
    font-weight: bolder;
    position: absolute;
    right: 25%;
    color: #ffffff;
    font-size: 40px;
    transition: 0.3s;
}
.close:hover,
.close:focus {
    color: rgb(255, 0, 0);
    cursor: pointer;
}
@media only screen and (max-width: 700px) {
    .modalImage {
        width: 100%;
    }
}
</style>
</head>
<body>
<h1>Image Modal Gallery Example</h1>
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3635300/pexels-photo-3635300.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img class="ImgThumbnail" src="https://i.picsum.photos/id/237/536/354.jpg"/>
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01" />
</div>
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
    item.addEventListener("click", event => {
        modalEle.style.display = "block";
        modalImage.src = event.target.src;
    });
});
document.querySelector(".close").addEventListener("click", () => {
    modalEle.style.display = "none";
});
</script>
</body>
</html>

コードのポイント解説

CSS側のポイント

  • .ImgThumbnail： 角丸（border-radius）、ポインタカーソル、トランジション効果を設定し、画像がクリック可能であることを視覚的に伝えています。
  • .modal： 初期状態は display: none で非表示にしておき、クリック操作に応じてJavaScriptから表示を切り替えます。
  • メディアクエリ： 画面幅が700px以下の場合はモーダル内の画像を幅100%に拡大し、スマートフォンなど小さな画面にもレスポンシブ対応させています。

JavaScript側のポイント

  • querySelectorAll(".ImgThumbnail") ですべてのサムネイルを取得し、forEach を使って各要素にクリックイベントリスナーを登録します。
  • クリックされた画像の src 属性をモーダル内の <img> 要素にコピーすることで、拡大表示を実現しています。
  • 閉じるボタン（×）に対してもイベントリスナーを設定し、display: none を代入してモーダルを非表示に切り替えます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

CSSとJavaScriptで作るモーダル式画像ギャラリーの実装方法

サムネイルをクリックすると拡大画像がモーダルで表示され、「×」ボタンで元の画面に戻ります。外部ライブラリに依存しないため、軽量でカスタマイズしやすいのが魅力です。キャプション表示やスワイプ対応などを追加すれば、より本格的なギャラリーへ発展させられます。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSとJavaScriptを使ってレスポンシブ対応のスライドショーギャラリーを作成する方法

    Webサイトに画像を魅力的に表示したいとき、レスポンシブ対応のスライドショーギャラリーは非常に効果的です。本記事では、CSSとJavaScriptだけを使って、前後移動ボタン・キャプション表示・サムネイルナビゲーションを備えたスライドショーギャラリーを作成する方法を詳しく解説します。外部ライブラリ不要なので、軽量かつ自由にカスタマイズできるのが大きな魅力です。 実装例：完全なコード 以下が、CSSとJavaScriptで作成するスライドショーギャラリーの完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta