画像のポップアップが表示されず困っています。

初心者のため、質問文に至らない点がありましたらご容赦ください。
回答宜しくお願い致します。

前提・実現したいこと

AWScloud9のワークスペースで画像をクリックすると拡大表示させるイベントハンドラを作成しています。
使用している画像はlesson4-assetsというフォルダにまとめて入れています。

発生している問題・エラーメッセージ

画像を拡大表示させる前は正しく表示できていますが、クリックした後に画像を拡大表示させることができず、灰色の枠だけが表示されています。

[Gyazo](https://i.gyazo.com/3b3dadea899acf98906073ec2a2f69de.gif)

該当のソースコード

LightBox.html

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>jQuery テスト</title>
6        <link rel="stylesheet" href="LightBox.css">
7    </head>
8    
9    <body>
10        <!--拡大表示用のオーバーレイ-->
11        <div class="overlay">
12            <div class="popup-content"></div>
13            </div>
14            
15            <!--サムネイル-->
16            <a class="popup" href="lesson4-assets/img1-large.jpg"><img src="lesson4-assets/img1-small.jpg" width="140" height="140" alt="Cat 1"></a>
17            <a class="popup" href="lesson4-assets/img2-large.jpg"><img src="lesson4-assets/img2-small.jpg" width="140" height="140" alt="Cat 2"></a>
18            
19            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
20            <script src="LightBox.js"></script>
21    </body>
22    
23</html>
24
25

LightBox.css

css
1/* 後ろを覆う黒い幕 */
2.overlay {
3    /* 画面いっぱいに表示 */
4    position: fixed;
5    top: 0;
6    left: 0;
7    width: 100%;
8    height: 100%;
9    
10    /* 他のコンテンツより上のレイヤーに表示 */
11    z-index: 10000;
12    
13    /* 初期状態では非表示 */
14    display: none;
15    
16    /* 透けた黒色にする */
17    background-color: rgba(0, 0, 0, 0.8);
18    
19    /* マウスカーソルを手の形にする */
20    cursor: pointer;
21}
22
23/* 拡大写真の表示エリア */
24.popup-content {
25    /* 60*60で左右中央に表示する */
26    position: absolute;
27    top: 50%;
28    left: 50%;
29    width: 60px;
30    height: 60px;
31    margin-top: -30px;
32    margin-left: -30px;
33    text-align: center;
34    
35    /* 枠をつける */
36    padding: 4px;
37    background-color: #ccc;
38}

LightBox.js

javascript
1// 画像ロード中の表示エリアサイズ (px)
2const initialSize = 60;
3
4//拡大表示をウィンドウの端から何px空けるか
5const padding = 100;
6
7//各アニメーションの時間(ミリ秒)
8const animDuration = 300;
9
10//img要素を追加する
11const showImage = (img) => {
12    const $img = $(img);
13    
14    //ウィンドウの幅と高さを取得
15    const windowWidth = $(window).width();
16    const windowHeight = $(window).height();
17    
18    //ウインドウのアスペクト比を計算
19    const windowAspectRatio = windowWidth / windowHeight;
20    
21    //画像のアスペクト比を計算
22    const imageAspectRatio = img.width / img.height;
23    
24    //ウィンドウと画像のどちらが横に長いかによって
25    //表示サイズを決める
26    let dispWidth;
27    let dispHeight;
28    if (windowAspectRatio > imageAspectRatio) {
29        // 画像が縦に長い場合
30        dispHeight = windowHeight - padding;
31        dispWidth = dispHeight * imageAspectRatio;
32    } else {
33        // 画像の方が横に長い場合
34        dispWidth = windowWidth - padding;
35        dispHeight = dispWidth / imageAspectRatio;
36    }
37    
38    // 画像の表示サイズをセット
39    $img.css({
40        width: `${dispWidth}px`,
41        height: `${dispHeight}px`,
42        display: 'none',
43        
44    });
45    
46    // img要素を.popup-content内に挿入
47    $('popup-content').html(img);
48    
49    // 表示エリアの拡大アニメーション
50    $('.popup-content').animate(
51        {
52            width: `${dispWidth}px`,
53            height: `${dispHeight}px`,
54            // 下記二つは上下左右に置くために必要
55            'margin-left':`${-dispWidth / 2}px`,
56            'margin-top': `${-dispHeight / 2}px`,
57        },
58        animDuration,
59        'swing',
60        () => {
61            //拡大アニメーションが終わったら画像をフェードイン
62            $img.fadeIn(animDuration);
63        },
64        );
65};
66
67// imageUrlの画像をポップアップで表示する関数
68const showPopup = (imageUrl) => {
69    // 前回挿入したimg要素を削除
70    $('.popup-content').html('');
71    
72    // オーバーレイ（黒背景と画像表示エリア)をフェードイン
73    $('.overlay').fadeIn(animDuration);
74    
75    // 画像表示エリアを小さな四角にする
76    $('.popup-content').css({
77        width: `${initialSize}px`,
78        height: `${initialSize}px`,
79   
80    // 下記二つは上下左右中央に置くために必要
81    'margin-left': `${-initialSize / 2}px`,
82    'margin-top': `${-initialSize / 2}px`,
83    });
84    
85    //img要素を作成して拡大画像をロードする
86    const img = new Image();
87    img.onload = () => {
88        // 画像のロードが終わるとここが実行される
89        showImage(img);
90    };
91    img.src = imageUrl;
92    
93};
94
95// ポップアップを閉じる
96const closePopup = () => {
97    $('overlay').fadeOut(animDuration);
98};
99
100// .popup要素がクリックされたらポップアップを表示
101$('.popup').on('click', (e) => {
102    e.preventDefault();
103    const imageUrl = $(e.currentTarget).attr('href');
104    showPopup(imageUrl);
105});
106
107// オーバーレイがクリックされたらポップアップを閉じる
108$('overlay').on('click', (e) => {
109    e.preventDefault();
110    closePopup();
111});

試したこと

img画像の呼び出しがうまくできていないかもしれない、と思い、相対パスのフォルダの指定方法が誤っていないか、などを確認しました。ワークスペースのフォルダの階層は画像のようになっています。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

自己解決

javascript
1
2 // img要素を.popup-content内に挿入
3    $('popup-content').html(img);
4
5// ポップアップを閉じる
6const closePopup = () => {
7    $('overlay').fadeOut(animDuration);
8
9// オーバーレイがクリックされたらポップアップを閉じる
10$('overlay').on('click', (e) => {
11    e.preventDefault();
12    closePopup();
13});