【JQuery】モーダルで画像の拡大表示をする方法【備忘録】

どうも、イシト（@ishitowork）です。

プログラミングを勉強して約半年が経過しました。
まだまだスキル的にも雑魚なので、継続して勉強を続けていきます。

さてみなさん、今回はWeb制作において「画像をクリックしたら拡大表示させる方法」を「JQuery」を使って実装するやり方を解説していこうと思います。

これができるとより動きのあるWebサイトが作れると思うので、ぜひ参考にしてみてください。

では、さっそく解説していこうと思います。

※今回は「デイトラ」で作成したWebページにJQueryのコードを追加して作成していきたいと思います。

【JQuery】モーダルで画像の拡大表示をする方法

「クリックした画像が拡大して表示されるモーダルの作成方法」です。

下記のような感じ。
クリックすると…

クリックすると、画面いっぱいに画像が広がる！

こんな感じのやつを作っていきます。

• 手順①：まずは、HTMLで画像を配置しよう
• 手順②：CSSを書いていこう
• 手順③：JQueryで動きをつけていこう

さて一つずつ解説していきます。

手順①：まずは、画像を配置しよう

HTMLで画像を配置していきましょう。

<section class="course section">
    <div class="container">
        <h2 class="section-title">コース一覧</h2>
        <div class="course-wrapper">
            <div class="course-item">
                <a href=""><img src="./img/web_first.png" alt="デイトラ初級編"></a>
                <p>HTML / CSS / Bootstrap</p>
            </div>
            <div class="course-item">
                <a href=""><img src="./img/web_second.png" alt="デイトラ中級編"></a>
                <p>HTML / CSS / JavaScript / JQuery</p>
            </div>
            <div class="course-item">
                <a href=""><img src="./img/web_third.png" alt="デイトラ上級編"></a>
                <p>PHP / WordPress</p>
            </div>
         </div>
      </div>
</section>

上記のソースコードで冒頭にある、画像が3枚横並びになった表示になります。
そして、</section>の下あたりに、下記のコードを書きます。

<div class="modal">
　　<div class="bigimg"><img src="" alt=""></div>
　　<p class="close-btn"><a href="">✖</a></p>
</div>

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

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

これでHTMLの記述はOK。

手順②：CSSを書いていこう

次にCSSで下記のように記述して整えていきます。

.course-item a:hover {
      opacity: 0.8;
    }

.course-item a img {
      width: 100%;
    }

.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: 250px;
      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;
    }

CSSは上記のような感じ。
ここで重要な点を解説すると、

• 「modal」の部分は、画面全体を黒の半透明背景が覆い、初期状態では非表示にする。
• 「bigimg」には位置、サイズ調整の記述を行い、上から80px、左右中央に配置されるようにする。
• 「close-btn」も同様に位置、サイズ調整を行い、モーダルの右上に表示されるようにする

手順③：JQueryで動きをつけていこう

最後にJQueryで動きをつけていきます。

$(function() { 
$('.course-item 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
      });
});

JQueryの記述は上記のような感じです。

なにがなんだかわからないと思うので解説していきます。

JQueryの説明【画像をクリックしたときの処理】

まず「$(‘.course-item 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タグの遷移を無効化するために必要な記述です。

という具合になります。
解説は以上です。

まとめ：ちょっと難しいけど頑張っていきましょう。

ということで、今回は、

「クリックした画像が拡大して表示されるモーダルの作成方法」

をご紹介しました。
Web制作において、モーダル表示をすることはとても大事なスキルになってくるのでぜひ覚えていきましょう。

わからないことがあればググってググってググりまくってください。

そうやって少しずつ前進していきましょう。

以上です。

ABOUT ME

ishito

どうも、Ishito(イシト)です。(29歳・男） サラリーマン 兼 Webデザイナー（個人事業）をやっています。 【僕のWebデザイナー業（個人事業）】 2021年7月から下記屋号のもと、Webデザイナーとして個人事業をさせてもらっています。 Riore.design（リオレデザイン） 【僕のサラリーマン業】 僕は今年でサラリーマン歴10年目。 現在は中小企業で「係長」を務めています。 仕事内容は、事務屋。 経理がメインですが、総務や労務などにも幅広く携わっています。 まだまだ未熟な僕ですが、サラリーマン業や個人事業についての情報やボヤキや愚痴なんかも発信していこうと思います。 共感してくれたら嬉しいです!(^^)!