JavaScript jQueryのライブラリ「LightBox2」で「$.fn」のプロトタイプでの関数宣言ではまったこと

2023/10/18

画像ファイルをHTMLに記述して拡大表示を行う場合に良く使う「LightBox2」で、プロトタイプでの関数宣言で最近はまったので忘備録的に記載します。

「LightBox2」自体の使い方は難しくなく、以下の様な感じでHTMLを作れば画像の拡大表示ができます。

■LightBox2の例

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>
<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});
</script>

</head>
<body>
<h4>LightBox2テスト</h4>
<a href="./example1.jpg" data-lightbox="album" >
  <img src="./example1.jpg" id="" width="100" >
</a>
<a href="./example2.jpg" data-lightbox="album" >
  <img src="./example2.jpg" id="" width="100" >
</a>
<a href="./example3.png" data-lightbox="album" >
  <img src="./example3.png" id="" width="100" >
</a>
</body>
</html>

上のHTMLでは何も問題は無いのですが、ここに以下の Javascript ファイルを読込んで、そのファイル内の関数を呼出した時にエラーが発生しました。

■Javascriptの例（test.js とする）

(function($) {
    $.fnc = {};
    $.fnc.test = function () {	// ただ単に"test"を表示させる
        alert("test");
    };
})(jQuery);

それでは、先ほどのHTMLファイルに上記の「test.js」を追加してみます。

■LightBox2の例・その２

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./js/test.js"></script>
<script type="text/javascript" src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>
<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});

// test display
$.fnc.test();
</script>

</head>
<body>
<h4>LightBox2テスト</h4>
<a href="./example1.jpg" data-lightbox="album" >
  <img src="./example1.jpg" id="" width="100" >
</a>
<a href="./example2.jpg" data-lightbox="album" >
  <img src="./example2.jpg" id="" width="100" >
</a>
<a href="./example3.png" data-lightbox="album" >
  <img src="./example3.png" id="" width="100" >
</a>
</body>
</html>

このファイルをブラウザで開いても、「alert("test");」の実行が行われませんでした。
Chromeのデベロッパーツールでソースを開いて上記の16行目でブレイクさせると、「$.fnc」は「undefined」となっていました。「undefined」なので当然「$.fnc.test();」は実行不可能でした。

「lightbox2」のJavascriptを読込むと、どうも「JQuery」のプロパティ（この表現が正しいかどうかも分かりませんが）がクリアされる様です。

それならばと「test.js」ファイルの読込を「lightbox2」の後に持ってきたら、「$.fnc.test();」が実行されアラートが表示されました。

少し、便宜的な方法かもしれませんが、何かの参考になればと思い記事を書きました。

VB.NET-TIPS などプログラミングについて

■LightBox2の例

■Javascriptの例（test.js とする）

■LightBox2の例・その２

関連する記事

コメント