#pgid
 
 ** 目次 [#r8895a73]
 #contents
 
 ** 概要 [#zaaf1c41]
 画像サムネイルから拡大画像を表示するJavaScriptのライブラリは lightbox などありますが、
 同じようなものでPopBoxというライブラリがあります。
 
 - PopBox公式サイト
 http://www.c6software.com/Products/PopBox/
 
 公式サイトの画像をクリックしてみてください。
 ローディング後に画像がアニメーションしながら拡大してきます。
 
 このライブラリの使い方について記述してみます。
 
 #blikimore
 
 ** 簡単な使い方 [#ea3ebf9f]
 まずは、細かい設定はどうでもよいので、動くものを作りたい!というモチベーションの方向けに
 ↓このページの Quick Start について見ていきます。
 
 ▼Quick Start
 http://www.c6software.com/Products/PopBox/Documentation.aspx#QuickStart
 
 *** 1.scriptタグをHTMLページに貼り付けます [#i1d278dd]
 
  <script src="/yoursite/scripts/PopBox.js"  type="text/javascript"></script>
 
 - 「COLOR(blue){/yoursite/scripts}」の部分は変更してください
 
 *** 2.設定が必要なグローバル変数を指定します [#w826d6ac]
 
  <script type="text/javascript">
      popBoxWaitImage.src = "/images/spinner40.gif";
      popBoxRevertImage   = "images/magminus.gif";
      popBoxPopImage      = "images/magplus.gif";
  </script> 
 
 - 「COLOR(blue){/images}」の部分は変更してください
 
 *** 3.スタイルシートをオーバーライドします [#l092c435]
 
  .PopBoxImageSmall
  {
     none 0px white;
     url("http://yourpath/magplus.cur"), pointer;
  }
  .PopBoxImageLarge
  {
     solid thin #CCCCFF;
     url("http://yourpath/magminus.cur"), pointer;
  }
 
 - 「COLOR(blue){yourpath}」の部分は images と同じディレクトリを指定してください
 
 *** 4.利用するバージョンを決めます [#geb334dd]
 今回は、原文の「The Version 2.x Way」の方法を使うことにします。
 
 *** 4-1.画像のパスを確認しておく [#u5319e09]
 サムネイル画像と、拡大後の画像のパスを確認しておきましょう。
 
 *** 4-2.imgタグを書きます [#g4fdfafd]
  <img  id="imgBlueScoop" alt=""
      src="images/BlueScoopSmall.JPG" />
 
 - COLOR(red){src}にはサムネイル画像を指定します
 
 *** 4-3.拡大用画像を設定します [#x4b749fd]
  <img  id="imgBlueScoop" alt=""
      src="images/BlueScoopSmall.JPG"
      pbsrc="images/BlueScoop.JPG" />
 
 - COLOR(red){pbsrc}に拡大画像を指定します
 
 *** 4-4.キャプションを設定します [#ya881002]
  <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" />
 
 - COLOR(red){pbCaption}は普通にHTMLを書くことができます
 
 *** 4-5.タイトルと、classを設定します [#j3944380]
  <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のCOLOR(red){class}を指定しておくと、画像の上に乗ったときにマウスカーソルが検索カーソルになります
 - COLOR(red){title}はaltと同じように動作します
 
 *** 4-6.イベントハンドラを設定します [#k2c95e6e]
  <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');" />
 
 - COLOR(red){onclick}イベントにCOLOR(red){Pop(this,50,'PopBoxImageLarge');}というハンドラを割り当てています
 PopはPopBoxのライブラリ中で定義されています
 
 -- 簡単に引数説明をすると、
 --- this = imgエレメント
 --- 50 = 拡大/縮小する速度
 --- 'PopBoxImageLarge' = 拡大画像へ割り当てるclass
 
 
 ** 属性 [#lde27028]
 pbsrcの代わりにCOLOR(red){pbSrcNL}という属性を設定することができます。
 これは画像をプレロードせず、クリックされた時点でロードを行います。
 
 その他の属性については↓こちら
 COLOR(red):※なお、属性の大文字小文字は問いません
 
 | <img>タグ属性     |型    |例                                  |デフォルト                  |内容  |h
 | pbSrc             |string|pbSrc="images/BlueScoop.JPG"        |なし                        |拡大画像用の属性です。画像はonloadでプレロードされます |
 | pbSrcNL           |string|pbSrcNL="images/BlueScoop.JPG"      |なし                        |拡大画像用の属性です。画像はクリック時に初めてロードされます |
 | pbShowCaption     |string|pbShowCaption="true"                |popBoxShowCaptionを適用     |拡大画像の下に表示するキャプションを表示するかどうか |
 | pbCaption         |string|pbCaption="hogehogeの写真です"      |title属性を適応             |拡大画像の下に表示するキャプションの内容です |
 | pbShowRevertBar   |string|pbShowRevertBar="true"              |popBoxShowRevertBarを適用   |拡大画像の上に透明な背景を敷くかどうか  |
 | pbShowRevertText  |string|pbShowRevertText="true"             |popBoxShowRevertTextを適用  |拡大画像の上にテキストを表示するかどうか  |
 | pbRevertText      |string|pbRevertText="上のテキストです"     |popBoxRevertTextを適用      |拡大画像の上に表示されるテキスト  |
 | pbShowRevertImage |string|pbShowRevertImage="true"            |popBoxShowRevertImageを適用 |閉じるアイコンを拡大画像の右上に表示するかどうか  |
 | pbRevertImage     |string|pbRevertImage="images/magminus.gif" |popBoxRevertImageを適用     |閉じるアイコンのURLです。20x20pixelのみ  |
 | pbShowPopBar      |string|pbShowPopBar="true"                 |false                       |ポップし終えたものにテキスト/アイコンを表示するかどうか  |
 | pbShowPopText     |string|pbShowPopText="true"                |popBoxShowPopTextを適用     |ポップし終えたものにテキストを表示するかどうか  |
 | pbPopText         |string|pbPopText="これはpopしたよ"         |popBoxPopTextを適用         |ポップし終えたものに表示されるテキスト  |
 | pbShowPopImage    |string|pbShowPopImage="true"               |popBoxShowPopImageを適用    |ポップし終えたものにアイコンを表示するかどうか  |
 | pbPopImage        |string|pbPopImage="images/magminus.gif"    |popBoxPopImageを適用        |ポップし終えたものに表示するアイコンのURLです。20x20pixelのみ  |
 
 
 *** 属性Tips [#f52c32eb]
 - COLOR(red){pbCaption}は、「 ' (シングルクォート)」を許しますが「 " (ダブルクォート)」は許しません
  <a>タグを設定する場合は「 ' 」を使ってください
 
 *** 属性のサンプル [#v31b8d8f]
 その他の気になることをまとめました
 
 ▼属性サンプル
 &ref(popbox_sample_img01.jpg);
 [[▼属性サンプル:http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_attr]]
 &ref(popbox_sample_img01.jpg,nolink);
 http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_attr
 
 ** グローバル変数 [#m015d4ac]
 下記のグローバル変数をページのonloadのタイミングなどで上書きすれば、いちいち<img>タグに上記属性をうめなくても済みます。
 
 | グローバル変数        | 型    | デフォルト                    | 内容  |h
 | popBoxAutoClose       |boolean| true                          | デフォルトでは、拡大画像をクリックすれば小さくなりますが、falseに指定することでこのイベントを発生させなくできます |
 | popBoxWaitImage.src   |string | なし                          | 拡大画像が表示されるまでのWait画像のURLです。pbSrcNLじゃないと意味無いかも… |
 | popBoxShowCaption     |boolean| true                          | 拡大画像の下に表示するキャプションを表示するかどうか |
 | popBoxCaptionBelow    |boolean| false                         | 拡大画像の下に表示するキャプションに透明な背景を敷くかどうか  |
 | popBoxShowRevertBar   |boolean| true                          | 拡大画像の上に透明な背景を敷くかどうか  |
 | popBoxRevertBarAbove  |boolean| false                         | 拡大画像の上にオーバーレイで表示しないかどうか (falseならオーバーレイ表示)  |
 | popBoxShowRevertText  |boolean| true                          | 拡大画像の上にテキストを表示するかどうか  |
 | popBoxRevertText      |string | Click the image to shrink it. | 拡大画像の上に表示されるテキスト  |
 | popBoxShowRevertImage |boolean| true                          | 閉じるアイコンを拡大画像の右上に表示するかどうか  |
 | popBoxRevertImage     |stirng | /images/magminus.gif          | 閉じるアイコンのURLです。20x20pixelのみ  |
 | popBoxPopBarAbove     |boolean| false                         | ポップし終えたものにオーバーレイでテキスト/アイコンを表示しないかどうか (falseならオーバーレイ表示) trueにするなら、pbShowPopBarがtrueになっている必要アリ  |
 | popBoxShowPopText     |boolean| true                          | ポップし終えたものにテキストを表示するかどうか  |
 | popBoxPopText         |string | Click to expand.              | ポップし終えたものに表示されるテキスト  |
 | popBoxShowPopImage    |boolean| true                          | ポップし終えたものにアイコンを表示するかどうか  |
 | popBoxPopImage        |string | /images/magplus.gif           | ポップし終えたものに表示するアイコンのURLです。20x20pixelのみ  |
 
 *** グローバル変数のサンプル [#v31b8d8f]
 その他の気になることをまとめました
 
 ▼グローバル変数サンプル
 &ref(popbox_sample_img02.jpg);
 [[▼グローバル変数サンプル:http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_global]]
 &ref(popbox_sample_img02.jpg,nolink);
 http://okra.ark-web.jp/~takemura/public/js/popbox/#sample_global
 
 ** API [#td9a530f]
 よく使うAPIはPopとRevertだと思います。これだけとりあえず解説します。
 
 *** Pop [#f7daedc3]
 Pop ― 指定したエレメントを拡大します。
 
 ''パラメータ''
 - void Pop ( object, speed, className )
 -- object: 拡大対象の<img>エレメント
 -- speed: 拡大までの時間 (単位は 1/100秒 per pixcel なので、大きいほど移動する)
 -- className: 拡大画像に割り当てるCSSのclass
 
 ''補足''
 - 拡大画像を表示する際に、イメージをブラウザのウィンドウサイズの中央に表示します
 - また、イメージサイズがウィンドウより大きい場合は、ウィンドウサイズ内に縮小されます
 - 速度パラメータは、1/100秒毎のピクセル移動距離を指定します
 -- よって、大きいほど拡大までに時間がかからないようになります
 -- デフォルトは50になっています
 
 
 *** Revert [#p1273632]
 Revert ― 指定したエレメントをサムネイルサイズまで縮小します。
 
 ''パラメータ''
 - void Revert ( object, speed, className )
 -- object: 拡大した対象の<img>エレメント
 -- speed: 縮小までの時間 (単位は 1/100秒 per pixcel なので、大きいほど移動する)
 -- className: 縮小画像に割り当てるCSSのclass
 
 ''補足''
 - objectは Pop に与えたエレメント名のままでは不可
 -- COLOR(red):前に ''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')"  />
 
 #blikifooter(竹村)
 
 ----
 tag:[[JavaScript>tag/JavaScript]], [[ライブラリ>tag/ライブラリ]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

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