画像ファイルをHTMLに記述して拡大表示を行う場合に良く使う「LightBox2」で、 プロトタイプでの関数宣言で最近はまったので忘備録的に記載します。
「LightBox2」自体の使い方は難しくなく、以下の様な感じでHTMLを作れば画像の拡大表示ができます。
■LightBox2の例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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 とする）
1 2 3 4 5 6 | (function($) { $.fnc = {}; $.fnc.test = function () { // ただ単に"test"を表示させる alert("test"); };})(jQuery); |
それでは、先ほどのHTMLファイルに上記の「test.js」を追加してみます。
■LightBox2の例・その２
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!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();」が実行されアラートが表示されました。
少し、便宜的な方法かもしれませんが、何かの参考になればと思い記事を書きました。
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
⇒JavaScript jQueryを使った checkbox の操作方法
JavaScriptによるWeb開発のための、究極のレシピ集。 制作の現場で使われる定番テクニックからプロ技まで集めたそうです。
コメント