サイトアイコン たまプラ通信

ASP.NETサイトでFancyboxによる画像ポップアップ表示を(2)

前回の続きです。

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サイトを参照してくださいませ。

モバイルバージョンを終了