サムネイル画像をグインとアニメーション付きで拡大しウインドウ表示が出来る
JavaScriptライブラリ「PopBox」を紹介します。

本サイトでは襖のコーナーに使ったりしています。
襖イメージ

まずは設置から。下記公式サイトより「PopBox.zip」をダウンロードします。
http://www.c6software.com/Products/PopBox/
WS000003
ダウンロードしたZipファイルを解凍します。
WS000004
この内、「scripts/PopBox.js」と「imagesフォルダ」をサイト内の適当な場所へ設置します。

ではPopBoxを実装してみましょう。実装したいHtml内にスクリプトタグを記入します。
※実際のパスは環境に合わせて変更してください。

<script src="/scripts/PopBox.js" type="text/javascript"></script>

先ほど配置した「imagesフォルダ」へのパスを設定します。

<script type="text/javascript">
popBoxWaitImage.src = "/images/spinner40.gif";
popBoxRevertImage = "/images/magminus.gif";
popBoxPopImage = "/images/magplus.gif";
</script>

グローバル変数の宣言がいちいち面倒な方はPopBox.js内の1208行付近に設定がありますので、そちらで設定すると上記Html内の宣言は必要ありません。※v2.7aの場合

これで準備完了です。ではサムネイル用の画像と拡大用の画像を用意しましょう。
設置は簡単です。imgタグにサムネイル画像を指定して、pnsrcプロパティを追加して値を拡大用ファイルを指定します。

<img src="サムネイル画像"　pbsrc="拡大用画像" class="PopBoxImageSmall" onclick="Pop(this,50,'PopBoxImageLarge')>

これで、一応完成です。

次回は多数あるオプションについて説明します。

この投稿は 2010年2月9日 火曜日 10:04 AM に JavaScript, Web開発 カテゴリーに公開されました。