サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する[Pirobox]
(旧版-Pirobox V1.2)

サンプル使用方法Piroboxのダウンロード
Piroboxは、 サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページに、拡大画像をオーバーレイ表示します。
Piroboxは、「1枚の画像」または「複数画像のグループ」を表示する2つの方法があります。
ここでは、Pirobox V1.2(旧版)について解説しています。
現在、最新版は、PIROBOX EXTENDED V.1.1(2011.3.17) です。この拡張版は、YouTube、SWFやHTMLの表示が追加されています。
しかし、拡張版は、画像表示の機能のスライドショーなどの一部の機能が削除されています(下記の4、5項)。

同様なJavascriptにLightboxがあるが、Pirobox(V.1.2)の方がつぎの点に優れている。
  1. 画像の表示(アニメーション)がスムースである
  2. PC画面よりはみ出る大きな画像は、画面に収めるように表示する
  3. 拡大画面を別ウィンドウに、表示できる
  4. NEXT/PREVボタンを、拡大画像の外に配置できる(オプション)
  5. 自動スライドショーができる(オプション)

サンプル

1枚の画像(画像の大きさは、1024X768)

グループ1の複数画像

グループ2の複数画像

Image Errore



使用方法
ダウンロード
 
1. ダウンロードしたpiroboxを解凍します。
   【Pirobox設置例(本ページ)】 []:フォルダ
  

   |---[images] 表示画像用フォルダ(自分で用意) 
   |      |---[carnival]
   |      |      |---P4280326.jpg
   |      |      |---P5100370.jpg など(Width=640 表示画像) 
   |
   |---[lightbox12]
          |
          |---[css_pirobox]
          |     |---[black] pirobox スタイルシート black用
          |     |---[shadow] pirobox スタイルシート shadow用
          |     |---[white] pirobox スタイルシート white用
          |     |---css_page.css など。本ページ用。
          |
          |   
          |---[images] デモ用画像
          |     |---1.jpg など 
          |        
          |---[js]
          |     |---jquery.min.js minとは圧縮版をいう。以下同じ。
          |     |---piroBox.1_2.js
          |     |---piroBox.1_2_min.js
          |     |
          |
          |---photo-pirobox.htm 本ページ(自分で用意) 
 
準備
 
1. 3つのスタイル(shadow、white、black)の中から選んだ1つのCSSファイルをインクルードするタグを、HEADタグ内に書きます。
<link href="css_pirobox/shadow/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />
  • shadow、white、blackとは、拡大表示される画像の背景ボックスの色などを言っていっています。
  • shadow、white、blackの効果につては、Piroboxサイトのデモページを参照。
 
2. jQuery.js, pirobox.js及び pirobox optionsをインクルードするタグを、HEADタグに書きます。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.1_2_min.js"></script>
<-- 以下pirobox options -->
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
      my_speed: 300, //animation speed
      bg_alpha: 0.5, //background opacity
      radius: 4, //caption rounded corner
      scrollImage : false, // true == image follows the page _|_ false == image remains in the same open position
                           // in some cases of very large images or long description could be useful.
      slideShow : 'true', // true == slideshow on, false == slideshow off
      slideSpeed : 3, //slideshow
      pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
      pirobox_prev : 'piro_prev', // Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
      close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
      });
});

</script>
 
(piroboxオプション)
  • bg_alpha:画像が表示されたときのページの背景の透明度。1〜0の値。
    1 は、完全な不透明で、0 は、完全な透明。
  • slideShow:自動スライドショーの指定。'true'のとき、スライドショーを行う。'false'のとき、スライドショーを行なわない。
    もし、自動スライドショーが機能しない場合は、つぎのコードで置き換えて、試してください。
    slideShow : 'slideshow', // true == slideshow on, false == slideshow off
  • pirobox_next / pirobox_prev:NEXT/PREVボタン()の位置の指定。(上、pirobox表示例画像参照)
    値が、'piro_next'/ 'piro_prev' のときは、NEXT/PREVボタンは、画像表示ボックスの下の左右に表示されます。
    もし、画像表示ボックスの外(ページの左右の端)に置きたい場合は、'piro_next_out'/ 'piro_prev_out'を設定します。上のサンプル参照。
  • close_all:piroboxを閉じる方法の指定。
    '.piro_close'のとき、クローズボタン(画像表示ボックスの右上端)をクリックすると、表示が終了します。
    '.piro_close,.piro_overlay'のとき、画像表示ボックスの外側をクリックしても、表示が終了します。
  
 
設定
 
1. 表示したい画像のリンクタグ(Aタグ)に、class="pirobox"を追加し、piroboxを使用します。(1枚の画像)

<a href="../images/w640/P4280326.jpg" class="pirobox" title="my caption">
              <img src="../images/w640/P4280326.jpg" width="150" height="112" alt="" border=0></a>
  • href=:表示画像のURLを設定します。
  • title=:拡大オーバーレイ画像のパネルに表示されるタイトルを設定します。
  • src=:表示画像のURLを設定します(サムネール)。
  • width= / height=:サムネールの大きさを好みにより設定します。
 
2. もし、複数の画像を1グループとして表示したい場合は、それぞれの画像のリンクタグ(Aタグ)に、
  class="pirobox_gall"を追加し、piroboxを使用します。(複数画像のグループ)
  ページ内でグループを増やしたい場合は、pirobox_gall (固定)の後に、好きな名前 _xxxxx を追加します。
  (例)class="pirobox_gall_xxx1"  

<!--グループ1 -->
<a href="images/2_b.jpg" class="pirobox_gall" title="Set of images 1"><img src="images/2.jpg" width=70 height=70></a>
<a href="images/3_b.jpg" class="pirobox_gall" title="Set of images 1"><img src="images/3.jpg" width=70 height=70></a>
<a href="images/5_b.jpg" class="pirobox_gall" title="Set of images 1"><img src="images/5.jpg" width=70 height=70></a>

<!--グループ2 -->
<a href="../images/carnival/Venice Carnival7.jpg" class="pirobox_gall_venice" title="カーニバル 1"><img src="../images/carnival/Venice Carnival7.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival8.jpg" class="pirobox_gall_venice" title="カーニバル 2"><img src="../images/carnival/Venice Carnival8.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival9.jpg" class="pirobox_gall_venice" title="カーニバル 3"><img src="../images/carnival/Venice Carnival9.jpg" width=70 height=70></a>
  • class=の値は、グループ内では同じ値に設定します。
  • href=:表示画像のURLを設定します。
  • title=:拡大オーバーレイ画像のパネルに表示されるタイトルを設定します。
  • src=:表示画像のURLを設定します(サムネール)。
  • width= / height=:サムネールの大きさを好みにより設定します。
 
3. ページの例(まとめ)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>pirobox</title>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<!-- pirobox スタイルシートCSSは、例では shadow を選択-->
<link href="css_pirobox/shadow/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<!-- 
<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />
-->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.1_2_min.js"></script>
<script type="text/javascript"> <-- ↓ pirobox options -->
$(document).ready(function(){
$().piroBox({
      my_speed: 300, //animation speed
      bg_alpha: 0.5, //background opacity
      radius: 4, //caption rounded corner
      scrollImage : false, // true == image follows the page _|_ false == image remains in the same open position
                           // in some cases of very large images or long description could be useful.
      slideShow : 'true', // true == slideshow on, false == slideshow off
      slideSpeed : 3, //slideshow 
      pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
      pirobox_prev : 'piro_prev', // Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
      close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
      });
});

</script> 

</head>
<body>

<!--2グロープの例-->
<!--グループ1 -->
<a href="images/2_b.jpg" class="pirobox_gall" title="Set of images 1"><img src="images/2.jpg" width=70 height=70></a>
<a href="images/3_b.jpg" class="pirobox_gall" title="Set of images 1"><img src="images/3.jpg" width=70 height=70></a>
<a href="images/5_b.jpg" class="pirobox_gall" title="Set of images 1"><img src="images/5.jpg" width=70 height=70></a>

<!--グループ2 -->
<a href="../images/carnival/Venice Carnival7.jpg" class="pirobox_gall_venice" title="カーニバル 1"><img src="../images/carnival/Venice Carnival7.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival8.jpg" class="pirobox_gall_venice" title="カーニバル 2"><img src="../images/carnival/Venice Carnival8.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival9.jpg" class="pirobox_gall_venice" title="カーニバル 3"><img src="../images/carnival/Venice Carnival9.jpg" width=70 height=70></a>


</body>
</html>
(注1)ドキュメントタイプは、例のように書きます。
(注2)ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。
(注3)pirobox スタイルシートCSSをshadow、white、blackから1つを選択します。
(注3)pirobox optionsで好みに設定します。
Piroboxのダウンロード
PiroboxページのDownload「pirobox V.1.2.1 」をクリックし ダウンロードします。(2009.2現在 ファイル名:demo.zip)
現在、Piroboxサイトからpirobox V.1.2.1 は、ダウンロードできません。 ---≫ダウンロードdemo.zip
ダウンロードファイルを解凍するとdemoフォルダができます。必要なファイルなどは、その中のpirobox_1_2フォルダ内にあります。
css_pirobox、images、js各フォルダは不要です。


サンプル使用方法PiroboxのダウンロードTOP

pirobox 表示例

Lightbox系メディアビューア(まとめ)
NoビューアーJSフレームワーク画像動画*1動画共有サイト動画Webページスライドシュー備考
1LightboxPrototype
2PiroboxjQuery推奨
3Videoboxmootools
4Mediaboxmootools
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、 非JSフレームを選択可 ●*2推奨
※動画とは、SWF、FLV、MOV、WMV(*1)
※Shadowboxのスライドショーは、画像、動画などなんでも可能(*2)
動画関連サイト内リンク


  最終更新日:2012.2.28