モーダルウィンドウのサイズ調整・閉じるボタン・次のスライドへの移行

モーダルウィンドウを使って画像を拡大しようと考えています。
「動くWEBデザインアイデア帳（https://coco-factory.jp/ugokuweb/）」のモーダルウィンドウ（https://coco-factory.jp/ugokuweb/move01/9-6-3/）のページを参考に作成していますが、実装するもモーダルで拡大された画像が画面いっぱいに広がり、参考ページに記載されているような、右上の閉じるボタンや、データグループでまとめているはずの次の画像、前の画像への遷移ができません

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

参考ページのように、モーダルを閉じるボタンが表示されない。
モーダルグループ内の次のモーダルへの遷移ボタンが出ない。
モーダル内のimgが大きすぎる。

該当のソースコード

HTML
1<ul class="works-wrap gallery-list"> 
2        <li>
3          <a href="img/works-1.PNG" class="gallery" data-group="gallery"><img src="img/works-1.PNG" alt=""></a>
4          <h3>サイト名</h3>
5          <p>Design / Coding (Responsive)</p>
6        </li>
7        <li>
8          <a href="img/works-2.PNG" class="gallery" data-group="gallery"><img src="img/works-2.PNG" alt=""></a>
9          <h3>サイト名</h3>
10          <p>Design / Coding (Responsive)</p>
11        </li>
12        <li>
13          <a href="img/works-3.PNG" class="gallery" data-group="gallery"><img src="img/works-3.PNG" alt=""></a>
14          <h3>サイト名</h3>
15          <p>Design / Coding (Responsive)</p>
16        </li>
17        <li>
18          <a href="img/works-4.PNG" class="gallery" data-group="gallery"><img src="img/works-4.PNG" alt=""></a>
19          <h3>サイト名</h3>
20          <p>Design / Coding (Responsive)</p>
21        </li>
22        <li>
23          <a href="img/works-5.PNG" class="gallery" data-group="gallery"><img src="img/works-5.PNG" alt=""></a>
24          <h3>サイト名</h3>
25          <p>Design / Coding (Responsive)</p>
26        </li>
27        <li>
28          <a href="img/works-6.PNG" class="gallery" data-group="gallery"><img src="img/works-6.PNG" alt=""></a>
29          <h3>サイト名</h3>
30          <p>Design / Coding (Responsive)</p>
31        </li>
32      </ul>
33
34
35```CSS
36
37/*全て共通：hideエリアをはじめは非表示*/
38.hide-area{
39	display: none;
40}
41
42/*全て共通：モーダルのボタンの色を変更したい場合*/
43.modaal-close:after, 
44.modaal-close:before{
45	background:#ccc;	
46}
47
48.modaal-close:focus:after,
49.modaal-close:focus:before,
50.modaal-close:hover:after,
51.modaal-close:hover:before{
52	background:#666;
53}
54
55```JS
56$(".gallery").modaal({
57	type: 'image',
58	overlay_close:true,//モーダル背景クリック時に閉じるか
59	before_open:function(){// モーダルが開く前に行う動作
60		$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
61	},
62	after_close:function(){// モーダルが閉じた後に行う動作
63		$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
64	}
65});
66

試したこと

HTML内のモーダル・CSSのリンク確認（問題なし）

HTML内のモーダル・jQuery.JSのスクリプト確認（問題なし）

参考ページから、必要と思われる箇所のみ抜き出しているが、不要と思われる箇所も入力し、検証を行った。

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

VScode使用

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

回答2件

.gallery要素が生成される前にjsを実行していので、命令が無視されている状態かもしれません。
現状のjsを$()で囲ってみてください。

参考：$(function() {...}) について | Qita

js
1$(function(){
2	$(".gallery").modaal({
3		type: 'image',
4		overlay_close:true,//モーダル背景クリック時に閉じるか
5		before_open:function(){// モーダルが開く前に行う動作
6			$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
7		},
8		after_close:function(){// モーダルが閉じた後に行う動作
9			$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
10		}
11	});
12});