PopBoxの使い方 http://www.ark-web.jp/sandbox/wiki/265.html

PopBoxの使い方
[edit]

目次

[edit]

概要

画像サムネイルから拡大画像を表示するJavaScriptのライブラリは lightbox などありますが、
同じようなものでPopBoxというライブラリがあります。

公式サイトの画像をクリックしてみてください。
ローディング後に画像がアニメーションしながら拡大してきます。

このライブラリの使い方について記述してみます。

[edit]

簡単な使い方

まずは、細かい設定はどうでもよいので、動くものを作りたい!というモチベーションの方向けに
↓このページの Quick Start について見ていきます。

▼Quick Start
http://www.c6software.com/Products/PopBox/Documentation.aspx#QuickStart

[edit]

1.scriptタグをHTMLページに貼り付けます

<script src="/yoursite/scripts/PopBox.js"  type="text/javascript"></script>
[edit]

2.設定が必要なグローバル変数を指定します

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

3.スタイルシートをオーバーライドします

.PopBoxImageSmall
{
   none 0px white;
   url("http://yourpath/magplus.cur"), pointer;
}
.PopBoxImageLarge
{
   solid thin #CCCCFF;
   url("http://yourpath/magminus.cur"), pointer;
}
[edit]

4.利用するバージョンを決めます

今回は、原文の「The Version 2.x Way」の方法を使うことにします。

[edit]

4-1.画像のパスを確認しておく

サムネイル画像と、拡大後の画像のパスを確認しておきましょう。

[edit]

4-2.imgタグを書きます

<img  id="imgBlueScoop" alt=""
    src="images/BlueScoopSmall.JPG" />
[edit]

4-3.拡大用画像を設定します

<img  id="imgBlueScoop" alt=""
    src="images/BlueScoopSmall.JPG"
    pbsrc="images/BlueScoop.JPG" />
[edit]

4-4.キャプションを設定します

<img  id="imgBlueScoop" alt=""
    src="images/BlueScoopSmall.JPG"
    pbsrc="images/BlueScoop.JPG"
    pbCaption="I don't know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It's not the greatest beach, but it's a beach, and that's a very nice change from a cube wall" />
[edit]

4-5.タイトルと、classを設定します

<img  id="imgBlueScoop" alt=""
    src="images/BlueScoopSmall.JPG"
    pbsrc="images/BlueScoop.JPG"
    pbCaption="I don't know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It's not the greatest beach, but it's a beach, and that's a very nice change from a cube wall"
    class="PopBoxImageSmall"
    title="Click to magnify/shrink" />
[edit]

4-6.イベントハンドラを設定します

<img  id="imgBlueScoop" alt=""
    src="images/BlueScoopSmall.JPG"
    pbsrc="images/BlueScoop.JPG"
    pbCaption="I don't know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It's not the greatest beach, but it's a beach, and that's a very nice change from a cube wall"
    class="PopBoxImageSmall"
    title="Click to magnify/shrink"
    onclick="Pop(this,50,'PopBoxImageLarge');" />
[edit]

属性

pbsrcの代わりにpbSrcNLという属性を設定することができます。
これは画像をプレロードせず、クリックされた時点でロードを行います。

その他の属性については↓こちら
※なお、属性の大文字小文字は問いません

<img>タグ属性デフォルト内容
pbSrcstringpbSrc="images/BlueScoop.JPG"なし拡大画像用の属性です。画像はonloadでプレロードされます
pbSrcNLstringpbSrcNL="images/BlueScoop.JPG"なし拡大画像用の属性です。画像はクリック時に初めてロードされます
pbShowCaptionstringpbShowCaption="true"popBoxShowCaptionを適用拡大画像の下に表示するキャプションを表示するかどうか
pbCaptionstringpbCaption="hogehogeの写真です"title属性を適応拡大画像の下に表示するキャプションの内容です
pbShowRevertBarstringpbShowRevertBar="true"popBoxShowRevertBarを適用拡大画像の上に透明な背景を敷くかどうか
pbShowRevertTextstringpbShowRevertText="true"popBoxShowRevertTextを適用拡大画像の上にテキストを表示するかどうか
pbRevertTextstringpbRevertText="上のテキストです"popBoxRevertTextを適用拡大画像の上に表示されるテキスト
pbShowRevertImagestringpbShowRevertImage="true"popBoxShowRevertImageを適用閉じるアイコンを拡大画像の右上に表示するかどうか
pbRevertImagestringpbRevertImage="images/magminus.gif"popBoxRevertImageを適用閉じるアイコンのURLです。20x20pixelのみ
pbShowPopBarstringpbShowPopBar="true"falseポップし終えたものにテキスト/アイコンを表示するかどうか
pbShowPopTextstringpbShowPopText="true"popBoxShowPopTextを適用ポップし終えたものにテキストを表示するかどうか
pbPopTextstringpbPopText="これはpopしたよ"popBoxPopTextを適用ポップし終えたものに表示されるテキスト
pbShowPopImagestringpbShowPopImage="true"popBoxShowPopImageを適用ポップし終えたものにアイコンを表示するかどうか
pbPopImagestringpbPopImage="images/magminus.gif"popBoxPopImageを適用ポップし終えたものに表示するアイコンのURLです。20x20pixelのみ
[edit]

属性Tips

[edit]

属性のサンプル

その他の気になることをまとめました

▼属性サンプル
popbox_sample_img01.jpg
http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_attr

[edit]

グローバル変数

下記のグローバル変数をページのonloadのタイミングなどで上書きすれば、いちいち<img>タグに上記属性をうめなくても済みます。

グローバル変数デフォルト内容
popBoxAutoClosebooleantrueデフォルトでは、拡大画像をクリックすれば小さくなりますが、falseに指定することでこのイベントを発生させなくできます
popBoxWaitImage.srcstringなし拡大画像が表示されるまでのWait画像のURLです。pbSrcNLじゃないと意味無いかも…
popBoxShowCaptionbooleantrue拡大画像の下に表示するキャプションを表示するかどうか
popBoxCaptionBelowbooleanfalse拡大画像の下に表示するキャプションに透明な背景を敷くかどうか
popBoxShowRevertBarbooleantrue拡大画像の上に透明な背景を敷くかどうか
popBoxRevertBarAbovebooleanfalse拡大画像の上にオーバーレイで表示しないかどうか (falseならオーバーレイ表示)
popBoxShowRevertTextbooleantrue拡大画像の上にテキストを表示するかどうか
popBoxRevertTextstringClick the image to shrink it.拡大画像の上に表示されるテキスト
popBoxShowRevertImagebooleantrue閉じるアイコンを拡大画像の右上に表示するかどうか
popBoxRevertImagestirng/images/magminus.gif閉じるアイコンのURLです。20x20pixelのみ
popBoxPopBarAbovebooleanfalseポップし終えたものにオーバーレイでテキスト/アイコンを表示しないかどうか (falseならオーバーレイ表示) trueにするなら、pbShowPopBarがtrueになっている必要アリ
popBoxShowPopTextbooleantrueポップし終えたものにテキストを表示するかどうか
popBoxPopTextstringClick to expand.ポップし終えたものに表示されるテキスト
popBoxShowPopImagebooleantrueポップし終えたものにアイコンを表示するかどうか
popBoxPopImagestring/images/magplus.gifポップし終えたものに表示するアイコンのURLです。20x20pixelのみ
[edit]

グローバル変数のサンプル

その他の気になることをまとめました

▼グローバル変数サンプル
popbox_sample_img02.jpg
http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_global

[edit]

API

よく使うAPIはPopとRevertだと思います。これだけとりあえず解説します。

[edit]

Pop

Pop ― 指定したエレメントを拡大します。

パラメータ

補足

[edit]

Revert

Revert ― 指定したエレメントをサムネイルサイズまで縮小します。

パラメータ

補足

popBoxAutoClose = false;
<img class="PopBoxImageSmall" alt="" id="popimage" 
	src   = "image_thumb.jpg"
	pbsrc = "image.jpg"
	onclick    = "Pop('popimage', 100, 'PopBoxImageLarge')"
	ondblclick = "Revert('popcopy'+'popimage', 100, 'PopBoxImageSmall')"  />

投稿者竹村 | パーマリンク

| append.gif

tag:JavaScript, ライブラリ?


添付ファイル: filepopbox_sample_img02.jpg 700件 [詳細] filepopbox_sample_img01.jpg 696件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-11-22 (木) 12:25:21 (3653d)

アークウェブのサービスやソリューションはこちら