【jQuery】選んだ画像が拡大表示になるモーダルの作成方法を解説します！
今回は、クリックした画像が拡大して表示されるモーダルの作成方法を解説していきます。
追記
ありがたいことに、この記事は多くの人に見てもらえています。
そこで、需要がありそうだったので、「class名を付けるだけでクリックした画像が拡大表示されるjQueryプラグイン」を作成しました。
下記記事に詳細を載せましたので、必要に応じてご活用ください！
下記から本編となります。
使用するケース
アルバムなど、「画像を並べて表示させる」際に使用されます。
複数の画像を通常の大きさで並べてしまうと、画面の表示領域を圧迫してしまいサイトの視認性が悪くなってしまう恐れがありますが、本機能を取り入れることで各画像をコンパクトに表示でき、気になった画像だけ大きくして見やすくすることができます。
サンプル
こちらから確認できます。
作成方法
jQueryを使って実装していきます。
なお、「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」要素を記述し、その中に「×」のテキストを記述します。これがクローズボタンになります。
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」の部分は、画面全体を黒の半透明背景が覆い、初期状態では非表示にしておきます。
「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タグの遷移を無効化するために必要な記述です。
以上の記述で完成となります。