JavaScript スニペット

HTMLとJavaScriptで実現する画像クリック拡大機能【コピペ可】

htmlとjavascriptを使用して画像拡大機能を実装する
ニャンコ
ニャンコ

最近ウェブサイトを見てて思ったんだけど、画像をクリックすると大きくなるのってすごく便利だよね！

写真や資料なんかを見て欲しい時に便利だね
モーダル専用のライブラリなんかもあるけど、今回は自分で作る方法を解説致するよ

ワンコ
ワンコ

ウェブサイトやブログで、コンテンツをより魅力的に見せる方法の一つに、クリックによる画像や動画の拡大表示があります。
この記事では、HTML、CSS、およびJavaScriptを使用して、画像と動画の両方を拡大表示するモーダルウィンドウを作成する方法を紹介します。

クリックで「画像」を拡大

サンプル

まずは、サンプルを用意しました。
３枚画像がありますので、クリックして挙動を確認してみてください。
クリックした画像が画面いっぱいに拡大され、背景は黒くなります。

画像クリックで拡大表示

サンプル画像

サンプル画像

サンプル画像

ソースコード

<!-- ポップアップ表示させたい画像に「popup」クラスを付与しています -->
<div class="wrap">
    <p class="img"><img src="sample1.jpg" alt="サンプル画像" class="popup"></p>
    <p class="img"><img src="sample2.jpg" alt="サンプル画像" class="popup"></p>
    <p class="img"><img src="sample3.jpg" alt="サンプル画像" class="popup" ></p>
</div>

<!-- モーダル -->
<div id="modal" class="modal">
    <span id="close">×</span>
    <img class="modal-content" id="modalImage">
</div>
/* モーダルのスタイル */
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 背景色 */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では不可視 */
    transition: opacity 0.5s, visibility 0.5s; /* アニメーション効果 */
}

/* モーダルの画像スタイル */
.modal-content {
    display: block;
    width: 80%;
    max-width: 700px;
}

/* モーダルの閉じるボタン */
#close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* ココから下は画像を並べてる部分のスタイルなので
　　モーダルとは直接関係がない部分です　　　　　 */
/********************************************/
.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.img  {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    padding: 20px;
    border: 1px solid #000;
    cursor: pointer;
    transition: opacity 0.3s ;
}

.img:hover {
    opacity: 0.7;
}

.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
// モーダルウィンドウ全体を指す要素
const modal = document.getElementById('modal');

// モーダル内で拡大表示される画像を指す要素
const modalImg = document.getElementById('modalImage');

// .popupクラスを持つ画像のリストです。これらの画像をクリックすると、モーダルが表示されます
const imgs = document.querySelectorAll('.popup');

// モーダルを閉じるためのボタン
const closeSpan = document.getElementById('close');

// 画像クリックでモーダルを表示するイベント
for( let img of imgs) {
    img.onclick = function(){

        モーダルを表示する
        modal.style.opacity = "1";
        modal.style.visibility = "visible";

        // モーダルで表示する画像に、クリックした画像のパスを設定する
        modalImg.src = this.src;
    }
}

// クローズボタンを押したらモーダルを閉じる
closeSpan.onclick = function() {
    modal.style.opacity = "0";
    modal.style.visibility = "hidden";
}

// 画像以外の部分をクリックしたらモーダルを閉じる
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.opacity = "0";
        modal.style.visibility = "hidden";
    }
}

解説

画像クリック時のイベント

for(let img of imgs) {
    img.onclick = function() {
        modal.style.opacity = "1";
        modal.style.visibility = "visible";
        modalImg.src = this.src;
    }
}
  • 「.popup」クラスを持つすべての画像に対してループを実行します。
  • img.onclick: 画像がクリックされた時の処理を定義します。
    モーダルのopacityとvisibilityを変更して、モーダルを表示し、クリックされた画像をmodalImgのソースに設定します。

モーダルの閉じるボタン

closeSpan.onclick = function() {
    modal.style.opacity = "0";
    modal.style.visibility = "hidden";
}
  • closeSpan.onclick: 閉じるボタンがクリックされた時の処理を定義します。
    モーダルを非表示にするためにopacityとvisibilityを変更します。

モーダル外のクリックイベント

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.opacity = "0";
        modal.style.visibility = "hidden";
    }
}
  • window.onclick: ウィンドウ全体に対するクリックイベントを設定します。
    クリックされた要素がmodal自身である場合（つまり、モーダルの外側がクリックされた場合）、モーダルを非表示にします。

簡単な記述でモーダルが作成できました

ワンコ
ワンコ

クリックで「動画」を拡大

画像と同じ作りで、動画も拡大が可能です。
そちらの作り方も見ていきましょう。

ニャンコ
ニャンコ

サンプル

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

ソースコード

cssは画像の時と特に違いがないので、割愛。

<video class="popup" src=samp001.mp4" type="video/mp4"></video>
<video class="popup" src=samp002.mp4" type="video/mp4"></video>


<div id="modal" class="modal">
    <!-- モーダルでフルサイズで表示される動画コンテナ -->
    <div id="modalContent" class="modal-content">
        <!-- 事前にmodal内にvideo要素を配置 -->
        <video id="modalVideo" controls style="width: 100%;">
            <source id="videoSource" type="video/mp4">
        </video>
    </div>
    <span id="close">×</span>
</div>
// モーダルウィンドウ全体を指す要素
const modal = document.getElementById('modal');

// .popupクラスを持つすべての動画要素のリスト
const videos = document.querySelectorAll('.popup');

// モーダルウィンドウ内で動画を表示する<video>要素
const modalVideo = document.getElementById('modalVideo');

// モーダルを閉じるためのボタン
const closeSpan = document.getElementById('close');

for (let video of videos) {
    video.onclick = function() {
        modal.style.opacity = "1";
        modal.style.visibility = "visible";
        modalVideo.src = this.src; // ここで直接クリックされたvideoのsrcを取得
        modalVideo.load(); // 新しいソースを読み込む
        modalVideo.play(); // 動画を再生
    }
}

closeSpan.onclick = function() {
    modal.style.opacity = "0";
    modal.style.visibility = "hidden";
    modalVideo.pause(); // モーダルを閉じると動画を停止
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.opacity = "0";
        modal.style.visibility = "hidden";
        modalVideo.pause(); // モーダルを閉じると動画を停止
    }
};

解説

動画クリック時の動作

videosで取得した各動画要素に対してクリックイベントリスナーを設定しています。
動画がクリックされたときに以下の処理が行われます。

for (let video of videos) {
    video.onclick = function() {
        modal.style.opacity = "1";
        modal.style.visibility = "visible";
        modalVideo.src = this.src; // ここで直接クリックされたvideoのsrcを取得
        modalVideo.load(); // 新しいソースを読み込む
        modalVideo.play(); // 動画を再生
    }
}
  • modal.style.opacity = "1"とmodal.style.visibility = "visible"により、モーダルウィンドウが可視状態になります。
  • this.srcから取得したソースURLがmodalVideo.srcに設定され、クリックされた動画のURLがモーダルで表示する動画に設定されます。
  • modalVideo.load()で新しいソースを読み込み、modalVideo.play()で動画の再生を開始します。

モーダルの閉じるボタンとウィンドウクリック時の処理

closeSpan.onclick = function() {
    modal.style.opacity = "0";
    modal.style.visibility = "hidden";
    modalVideo.pause(); // モーダルを閉じると動画を停止
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.opacity = "0";
        modal.style.visibility = "hidden";
        modalVideo.pause(); // モーダルを閉じると動画を停止
    }
};

closeSpan.onclickとwindow.onclickイベントリスナーは、モーダルウィンドウを閉じるための処理を定義しています。
これらのイベントが発生したとき、モーダルウィンドウの不透明度を0にし、可視性をhiddenに設定してモーダルを非表示にします。
また、modalVideo.pause()でモーダル内の動画の再生を停止します。

以上、ライブラリなしで画像、動画を拡大表示する方法でした。
ライブラリの方が細かい設定などが用意されていますが、このくらいの機能で良ければ素のJavaScriptで簡単に実装できますね。

ワンコ
ワンコ

-JavaScript, スニペット
-, ,