【jQuery】選んだ画像が拡大表示になるモーダルの簡単作成方法を解説します!

2020-07-17

今回は、クリックした画像が拡大して表示されるモーダルの作成方法を解説していきます。

「タケノコを拡大させる女の子」

使用するケース

アルバムなど、「画像を並べて表示させる」際に使用されます。

複数の画像を通常の大きさで並べてしまうと、画面の表示領域を圧迫してしまいサイトの視認性が悪くなってしまう恐れがありますが、本機能を取り入れることで各画像をコンパクトに表示でき、気になった画像だけ大きくして見やすくすることができます。

サンプル

こちらから確認できます。

 「ココナラ」からwebコーディングで収入GET!

作成方法

jQueryを使って実装していきます。

※jQueryを使うための準備については、下記よりご確認ください。

該当のHTMLは下記のように記述しています。

<ul>
  <li><a href=""><img src="img1.jpg" alt=""></a></li>
  <li><a href=""><img src="img2.jpg" alt=""></a></li>
  <li><a href=""><img src="img3.jpg" alt=""></a></li>
</ul>
<div class="modal">
  <div class="bigimg"><img src="" alt=""></div>
  <p class="close-btn"><a href="">✖</a></p>
</div>

まず「ul」で複数画像が並ぶリストをマークアップします。

その後に「modal」のクラスをつけたdiv要素を置き、その中に「bigimg」のクラスを付けたdiv要素を入れ、さらにその子要素として「img」タグを記述します。

この時点で、「bigimg」クラス内「img」タグの「src」属性は空で問題ありません。

さらに「close-btn」クラスをつけた「p」要素を記述し、その中に「×」のテキストを記述します。これがクローズボタンになります。
※テキストの「×」以外でもここは任意でOKです。

CSSは下記のように記述しています。

ul li a:hover {
      opacity: 0.8;
    }

ul li a img {
      width: 200px;
    }

.modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
    }

.bigimg {
      position: absolute;
      width: 80%;
      max-width: 800px;
      top: 80px;
      left: 0;
      right: 0;
      margin-right: auto;
      margin-left: auto;
    }

.close-btn {
      color: #fff;
      font-size: 40px;
      position: absolute;
      right: 20px;
      top: 0;
    }

.close-btn a {
      color: #fff;
      text-decoration: none;
    }

ポイントを絞って解説していきます。

「modal」の要素に
「position: fixed」
「top: 0」
「left: 0」
「width: 100%」
「height: 100vh」
「background-color: rgba(0, 0, 0, 0.8)」
を設定し、画面全体を黒の半透明背景が覆うようにしています。

また、「display: none」を設定し、初期状態では非表示にしておきます。

「bigimg」には位置、サイズ調整の記述を行い、上から80px、左右中央に配置されるようにしています。

「close-btn」も同様に位置、サイズ調整を行い、モーダルの右上に表示されるようにしています。

そしてjQueryの記載は下記となります。

 $('ul li a').click(function() {
        var imgSrc = $(this).children().attr('src');
        $('.bigimg').children().attr('src', imgSrc);
        $('.modal').fadeIn();
        $('body,html').css('overflow-y', 'hidden');
        return false
      });

$('.close-btn').click(function() {
        $('.modal').fadeOut();
        $('body,html').css('overflow-y', 'visible');
        return false
      });

「$('ul li a’).click(function() {~});」内の処理について

こちらは画像をクリックしたときの処理になります。それぞれ説明していきます。

「var imgSrc = $(this).children().attr('src’);」
は、「クリックした画像の子要素(img)のsrc属性をimgSrcの変数に設定する」
という処理になり、クリックした画像ごとにimgSrcの内容は変化します。

「$('.bigimg’).children().attr('src’, imgSrc);」
は、「bigimg内の子要素(img)のsrc属性を、imgSrcに書き換える」
という処理になります。
この記述により、クリックした画像と同じ画像をモーダル内で拡大画像として表示することができます。

「$('.modal’).fadeIn();」
は、モーダルを表示させる処理です。
「show」は一瞬で表示されますが「fadeIn」はだんだんと表示されるので、画面が急に変化することで生じるストレスを軽減させることができます。

「$('body,html’).css('overflow-y’, 'hidden’);」
は、画面の縦スクロールをさせないようにする処理です。
モーダル表示中は画像のみが注目されるので画像後ろの画面をスクロールさせる意味が無く、ユーザーがページの表示位置を見失ってしまうこと避けるために必要な処理となります。
この処理が入っていないモーダルをよく見かけますが、記述必須の処理だと個人的には思います。

「return false」
は、aタグの遷移を無効化するために必要な記述です。

「$('.close-btn’).click(function() { ~}); 」内の処理について

こちらはモーダル右上の×ボタンを押した際の処理になります。

「$('.modal’).fadeOut();」
は、モーダルを非表示にする処理となります。

「$('body,html’).css('overflow-y’, 'visible’);」
は、モーダルを表示した際に無効化していた縦スクロールを再度有効にするための処理となります。
「visible」の部分は「auto」にしがちで、それでもスクロールはされるのですが、「position:sticky」という記述を同ページ内の要素で使用していた場合、うまく動作しなくなってしまいます。
初期値は「visible」なので「visible」に戻すように注意しましょう。

「return false」は、上記でも説明しましたが、aタグの遷移を無効化するために必要な記述です。

以上の記述で完成となります。