前回の続きです。
ASP.NETサイトに、jQuery＋Fancyboxによる画像ポップアップ機構を組み込む、行ってみます。
前回は、Webサイトにライブラリファイルを配置しましたので、今回はそれらを使うコードを実際に書いてみます。さて、普通のWebサイトと言いますか、HTMLページに画像ポップアップ機構を組み込むのは非常に簡単なようで、たとえばこれが定型パターンです。
<link href="js/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/js/jquery-1.3.2.min.js"/ >
<script type="text/javascript" src="~/js/fancybox/jquery.easing-1.3.pack.js"/ >
<script type="text/javascript" src="~/js/fancybox/jquery.fancybox-1.3.1.js" />
<script type="text/javascript">
$('a#image').fancybox();
</script>
これで、次のようにa要素にid属性を付けてimg要素を囲んでやれば、画像クリックでポップアップします。
<a id="image" href="imagefile.jpg"><img src="thumb.jpg"></a>
上のスクリプトで、Fancyboxメソッドを呼ぶ際のセレクタが重要です。a要素のうちID属性がimageであるという限定です。こうしないと、aタグすべてに反応してしまったりして、おかしなことになります。
さて、普通のHTMLページならば最初のscript呼び出しをhead要素の中に入れてしまえばそれで終わりなのですが、ASP.NETサイトではたいていの場合はマスターページなどを使ったちょっと凝った作りになっていると思いますから、話は簡単にはいきません。
マスターページを使って、フォルダ構成に階層構造を持たせるような場合には、マスターページにスクリプト呼び出しを置くことができません。マスターページを含んだ個々のASP.NETページにて、スクリプトファイルの呼び出しでパスが変わってしまうからです。
それにもかかわらず、fancyboxメソッドの呼び出しは、ページのロード時に行わなければなりません（つまりbody要素のonloadイベントで呼び出す必要がある）。ということは、body要素を持つマスターページでしか呼び出しを行えないことになります。
<body onload="init()";">
これは、Google MapsをASP.NETページで表示させるといった場合にも使用した方法です。この関数init()を、個々のページでオーバライドしてやれば、個々のページに必要な初期化関数を呼び出せます。具体的には、こんなふうに書いておいてやればOKです（head要素の内部でなくてもOKです）。
<script type="text/javascript">
//<![CDATA[
init = function init2() {
$('a#image').fancybox();
}
//]]>
</script>
最初のJavaScriptライブラリの読み込みは、ScriptManagerProxyコントロールを配置して、そこで指定してやればよいでしょう。
<asp:ScriptManagerProxy id="smp" runat="server">
<scripts>
<asp:ScriptReference Path="../js/jquery-1.3.2.min.js"></asp:ScriptReference>
<asp:ScriptReference Path="../js/fancybox/jquery.easing-1.3.pack.js"></asp:ScriptReference>
<asp:ScriptReference Path="../js/fancybox/jquery.fancybox-1.3.1.js"></asp:ScriptReference>
</scripts>
</asp:ScriptManagerProxy>
CSSの読み込みは、普通に書いてやるしかないようです。
ということで、これだけでFancyboxを使った画像ポップアップが可能になります。a要素は、静的なHTMLページも、ASP.NETページでも変わりません。実際の動作は、「新館」の「カメラの部屋」を見て下さいませ（記事執筆時点）。
ちなみに、Fancybox()の呼び出し方で、いろいろな効果が可能です。このへんは、FancyboxのWebサイトを参照してくださいませ。
コメント