プログラミング学習

【デイトラ学習記録3】画像の拡大表示 Web制作コース中級編 jQuery 実践課題

TAKENTA
TAKENTA
【デイトラ】「Web制作コース中級編 jQuery 実践課題② 画像の拡大表示」の『学習記録』です。

本記事の内容

【デイトラ】「Web制作コース中級編 jQuery 実践課題② 画像の拡大表示」の『学習記録』

jQueryでの画像の拡大表示の実装

画像の拡大表示の課題

今回の課題は以下です。

(1)コース一覧の画像をクリックすると
(2)縦横画面いっぱいに薄いグレーの背景ボックスを表示
(3)その枠の中心に拡大されたコース写真を表示
(4)画面のどこかをクリックすると拡大写真と背景ボックスを非表示
(5)アニメーションはフェードイン・フェードアウト

こちらは、私が完成させたものを動画にしました。

jQueryを読み込むScriptをHTMLに記述する

HTML

<script src=”https://code.jquery.com/jquery-3.4.1.js”></script>
<script src=”./js/script.js”></script>

上記のコードをbodyの閉じタグ(</body>)の直前に記述しましょう。

また、「script.js」が自作コードを書き込むJavaScriptファイルになります。

画像拡大表示の背景ボックスになるタグをHTMLに記述する

HTML

<div id=”graydisplay”></div>

id名は、「graydisplay」としました。
この中にクリックした画像が拡大して表示されるイメージです。
また、記述する場所は、bodyの閉じタグ(</body>)の直前でいいでしょう。

背景ボックスのデザインをCSSに記述する

CSS

#graydisplay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: 100%;
background: rgba(0,0,0,0.45);
}
#graydisplay img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 90%;
max-height: 90%;
height: 90%;
}

背景ボックス(graydisplay)と拡大画像(graydisplay img)のデザインをCSSに記述します。

JavaScript(script.js)に画像拡大のコードを記述する

JavaScript

$(function(){
$(‘.course-item img’).click(function() {
$(“#graydisplay”).html($(this).prop(‘outerHTML’));
$(“#graydisplay”).fadeIn(200);
});
$(“#graydisplay, #graydisplay img”).click(function() {
$(“#graydisplay”).fadeOut(200);
});
});

これで、完成!動くはずです。

まとめ:【デイトラ】「Web制作コース中級編 jQuery 実践課題② 画像の拡大表示」の『学習記録』

何とか動きました(笑)

かなり時間をかけてしまいましたが、jQueryの実践課題はクリアすることが出来ました。

コードがおかしかったり、不格好であったりするのなら、ご指摘をお願いします!