久しぶりのプログラミングネタです。プログラミングというよりはWebサイトのカスタマイズネタですが、ASP.NETが絡んでいますのであえてプログラミングとしてみました（前置きが長い）。
ということで、私の運営するWebサイト（「新館」）に、ブログなどでもすでに組み込まれている、画像のポップアップ表示の機能を付けようと思い立ったわけです。このポップアップ表示では、ページの切り替えが起きないので、画像を拡大表示して戻る際のストレスがありません。
さっそくやってみましょう。
まず、画像ポップアップ表示に必要なソフトウェアを用意します。この手の機能は、JavaScriptライブラリとそのプラグインで実装するのが今では普通なので、今回もこれに倣います。ブログ（ココログ）ではJavaScriptライブラリMooToolsにプラグインZoomBoxを組み合わせているようなので、こちらはJavaScriptライブラリjQueryにプラグインFancyboxを組み合わせます。jQueryには、ほかにも画像表示用のプラグインがありますが、今回はシンプルにFancyboxで。
実は、Visual Studio 2010で、テンプレートにASP.NET MVCアプリケーションを指定すると自動的にjQueryは組み込まれるのですが、2008時代からメンテナンスし続けているWebサイトではこうはいかないでしょう。ですので、ライブラリファイルを入手し、Webサイトにコピーしましょう。
jQueryは、下記から入手できます。
バージョンが新しい方がよいかも知れませんが、組み合わせるプラグインとの相性を確認しておく必要はあるでしょう。Fancyboxでは少し古いバージョンの1.3.2が安全そうでしたので、これをダウンロードしました。ちなみにMinified版というのは実運用環境を想定した軽量バージョンです。ダウンロードできるのはJavaScriptファイルそのものですので、どこかに保存しておきます。
次に、Fancyboxを入手します。Fancyboxは下記から入手できます。
最新バージョンは1.3.1です。これをダウンロードします。Zip圧縮されていますので、保存しておいたものを解凍しておきます。
入手できたら、Webサイトに配置しましょう。配置といっても、コピーするだけです。まずはローカルの開発用Webサイトにコピーします。アプリケーションのルートに、「js」というフォルダを作り（名前は「scripts」でも何でもOK）、そこにダウンロードしたjQueryのライブラリjquery-1.3.2.min.jsをコピーします。
次に、そのフォルダにさらに「fancybox」というフォルダを作り（名前は何でもOK）、上記の解凍したファイルを一式コピーします。フォルダを作ったのは、ほかのプラグインを導入する際に、管理をしやすくするためです。
コピーすると、ソリューションエクスプローラにはこんな感じで出ているはずです。
これで、ひとまず準備完了です。次回は、コードを書いていってみましょう。
コメント