サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する［Pirobox］

ダウンロード

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. ３つのスタイル（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" 　


<!--グループ１ -->
<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>

<!--グループ２ -->
<a href="../images/carnival/Venice Carnival7.jpg" class="pirobox_gall_venice" title="カーニバル　１"><img src="../images/carnival/Venice Carnival7.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival8.jpg" class="pirobox_gall_venice" title="カーニバル　２"><img src="../images/carnival/Venice Carnival8.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival9.jpg" class="pirobox_gall_venice" title="カーニバル　３"><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>

<!--２グロープの例-->
<!--グループ１ -->
<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>

<!--グループ２ -->
<a href="../images/carnival/Venice Carnival7.jpg" class="pirobox_gall_venice" title="カーニバル　１"><img src="../images/carnival/Venice Carnival7.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival8.jpg" class="pirobox_gall_venice" title="カーニバル　２"><img src="../images/carnival/Venice Carnival8.jpg" width=70 height=70></a>
<a href="../images/carnival/Venice Carnival9.jpg" class="pirobox_gall_venice" title="カーニバル　３"><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で好みに設定します。

No	ビューアー	JSフレームワーク	画像	動画*1	動画共有サイト動画	Webページ	スライドシュー	備考
1	Lightbox	Prototype	●				●
2	Pirobox	jQuery	●				●	推奨
3	Videobox	mootools			●
4	Mediabox	mootools		●	●	●
5	Shadowbox	Prototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、非JSフレームを選択可	●	●	●	●	●*2	推奨

サンプル

１枚の画像（画像の大きさは、1024X768）

グループ１の複数画像

グループ２の複数画像

Image Errore