2024年8月から、デイトラでWeb制作コースを学んでいます。
今回は初級編DAY22「調べながら実装しよう」で、jQueryを使って自分でサイトの動きを実装する課題その2です。
初級編で構築したスイーツサイトに動きをつける課題がさらに1つ出ました。
- モーダルで画像の拡大表示
よくある、画像をクリックすると拡大されるあれです。
くうかなかなか上手くいかず手間取りました。おかげで理解できた…と思います！
くうか（元SEの主婦ミニマリスト）
- 20代でシステムエンジニアを経験（VBやJavaなど）
- ブラック企業だったことで7年ほどでSEを退職
- 2018年からブログ開始
- はてなブログ→WordPress「SWELL」へ（2020年〜）
- オリジナルのブログカスタマイズを公開
- SWELL公式サイトにメインブログが掲載されました
- Webプログラミングを勉強中（今ここ）
まずはjQueryを読み込ませる準備をしよう
まずはjsフォルダを作り、直下にscript.jsファイルを作成。
bodyタグを閉じる直前にjQuery読み込みコードを追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/script.js"></script>うっかり忘れるところだったので最初に書いておこう。
③モーダルで画像の拡大表示
- メニュー一覧の画像をクリックすると
- 縦横画面いっぱいに薄いグレーの背景ボックスを表示
- その枠の中心に拡大されたメニュー写真を表示
- 画面のどこかをクリックすると拡大写真と背景ボックスを非表示
- アニメーションはフェードイン・フェードアウト
”どの写真をクリックしたのか？”を取得する処理が1番難しそう。（どうやってやるの？笑）
モーダルのHTML
各メニュー画像のimgタグを空のaタグで囲みます。カーソルが変わってリンクされてるってわかるので。
<a href=""><img src="./img/menu1.png" alt="おすすめ ストロベリーケーキ"></a>拡大画像のhtml（imgタグは空）をフッターの後ろあたりに追加しました。↓
<!-- メニューの拡大画像 -->
<div class="menu-modal">
<img src="" alt="" class="menu-bigimg">
</div>課題②のページトップへ戻るボタンより後ろに書いておくと、こちらの方が配置が上に来るのでいいかなと。
モーダルのCSS
/* モーダルで画像の拡大表示*/
.menu-modal {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: none;
}
.menu-bigimg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 60%;
margin: auto;
display: block;
}
.menu-img:hover {
opacity: 0.7;
}- positionプロパティのfixedはその場所に固定する
- top0、left0の位置に
- 幅は100%、高さは100%は100vhと記載する
- display:none;でデフォルトは非表示にする
- positionプロパティのabsoluteは自由に配置できる
- 最大幅は60%（お好みで）
- top、bottom、left、rightをゼロにしmargin:autoとすることで画面真ん中に配置される
くうか真ん中に配置するっていうのが一筋縄ではいかなかった…
モーダルのjQuery
//モーダルで画像の拡大表示
jQuery(".menu-img a").click(function(){//画像のdivとaタグがクリックされたら
var imgSrc = jQuery(this).children().prop("src");//子要素のsrc属性を取得
jQuery(".menu-bigimg").prop("src",imgSrc);//拡大htmlのsrc属性に上書き
jQuery(".menu-modal").fadeIn();//フェードイン表示
jQuery("body").css("overflow", "hidden");//画面下をスクロールさせない
return false;//aタグの無効化
});
jQuery(window).click(function(){//画面のどこかがクリックされたら
jQuery(".menu-modal").fadeOut();//フェードアウト表示
jQuery("body").css("overflow","auto");//スクロールロック解除
});参考サイト
【デイトラ学習記録】WEB制作コース中級編DAY6｜PISCA PISCA
難しかったところが、最初の行「jQuery(“.menu-img a”).click(function(){」の””内。
.menu-imgだけで良いと考えていたけどどうしても動かなくて、たくさん調べたらaが必要？となって追加してみたら動きました。
あと属性取得のpropはattrを使っている人も多かったけど、近頃一般的なのはpropだという記述を読んでこちらを採用しました。
スクロールロック「jQuery(“body”).css(“overflow”, “hidden”);」は一応入れてみました。
くうか今回はjQueryが1番難しかったです。
【まとめ】jQueryでモーダルで画像の拡大表示を実装しよう
今回は「モーダルで画像の拡大表示」を実装しました。
- モーダルのHTML作成（aタグの追加・拡大表示用HTML）
- モーダルのCSS作成（モーダルの背景・画像の配置）
- モーダルのjQuery作成（クリック時に画像の要素を取得・フェードインフェードアウト・スクロールロック）
それぞれの処理がかなり難しく感じました。さすが3番目の課題！
色んなサイトや今回は役に立たなかったchatGPTさんのコードを何度も試して、ようやくこれだ！となりました。
くうかとても勉強になった気分です。笑
デイトラは比較的安価だし、自宅で自分のペースで学習できるので私には合っていました。
①②の課題の記事はこちらから。
コメント