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

目次 †

概要 †

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

• PopBox公式サイト
  http://www.c6software.com/Products/PopBox/

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

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

簡単な使い方 †

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

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

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

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

• 「/yoursite/scripts」の部分は変更してください

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

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

• 「/images」の部分は変更してください

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

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

• 「yourpath」の部分は images と同じディレクトリを指定してください

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

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

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

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

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

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

• srcにはサムネイル画像を指定します

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

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

• pbsrcに拡大画像を指定します

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" />

• pbCaptionは普通にHTMLを書くことができます

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" />

• PopBoxImageSmallのclassを指定しておくと、画像の上に乗ったときにマウスカーソルが検索カーソルになります
• titleはaltと同じように動作します

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');" />

• onclickイベントにPop(this,50,'PopBoxImageLarge');というハンドラを割り当てています
  PopはPopBoxのライブラリ中で定義されています

• 簡単に引数説明をすると、
  • this = imgエレメント
  • 50 = 拡大/縮小する速度
  • 'PopBoxImageLarge' = 拡大画像へ割り当てるclass

属性 †

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

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

属性Tips †

• pbCaptionは、「 ' (シングルクォート)」を許しますが「 " (ダブルクォート)」は許しません
  　<a>タグを設定する場合は「 ' 」を使ってください

属性のサンプル †

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

▼属性サンプル

http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_attr

グローバル変数 †

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

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

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

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

http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_global

API †

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

Pop †

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

パラメータ

• void Pop ( object, speed, className )
  • object: 拡大対象の<img>エレメント
  • speed: 拡大までの時間 (単位は 1/100秒 per pixcel なので、大きいほど移動する)
  • className: 拡大画像に割り当てるCSSのclass

補足

• 拡大画像を表示する際に、イメージをブラウザのウィンドウサイズの中央に表示します
• また、イメージサイズがウィンドウより大きい場合は、ウィンドウサイズ内に縮小されます
• 速度パラメータは、1/100秒毎のピクセル移動距離を指定します
  • よって、大きいほど拡大までに時間がかからないようになります
  • デフォルトは50になっています

Revert †

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

パラメータ

• void Revert ( object, speed, className )
  • object: 拡大した対象の<img>エレメント
  • speed: 縮小までの時間 (単位は 1/100秒 per pixcel なので、大きいほど移動する)
  • className: 縮小画像に割り当てるCSSのclass

補足

• objectは Pop に与えたエレメント名のままでは不可
  • 前に popcopy という文字列をくっつける必要がある

例

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')"  />

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

|

tag:JavaScript, ライブラリ?

人材募集

→詳しくはこちらのエントリで!!

Menu

• システム勉強会
• オープンソース・ライセンスなツールなど
• Plaggerでみんなのブックマークをアグリゲート

Tag

Google Friend Connect

最新の20件

ARK-Webビジネスブログの最新記事