第3回　Lightbox風プラグインでダイアログ表示（2）

はじめに

第3回も前回に引き続き、Lightbox風プラグイン（Shadowbox.js、ThickBox）を紹介していきます。

Shadowbox.jsは画像だけでなくFlashやムービーにも対応した、非常に多機能なライブラリとなっており、ThickBoxもHTMLコンテンツなどを表示できる自由度を持っています。

Shadowbox.js

Shadowbox.jsは、画像はもちろんのことFlashやムービー、HTMLコンテンツなどにも対応した、非常に多機能なライブラリです。多くのオプションも用意されており、高いカスタマイズ性を実現しています。

ただ純粋なjQueryプラグインというわけではなく、Prototype、YUIなど複数の有名どころのライブラリにも対応しており、それぞれにアダプタを用意する形をとっています。

ダウンロード

まずは配布サイトからShadowbox.js一式をダウンロードしましょう。ダウンロードページで必要なものを選択する形でダウンロードできますが、今回は「DownloadFull」ボタンから、ソース一式をダウンロードします。

展開するとサンプルなど提供されるすべてを確認することができますが、今回、実際に利用するものはsrcフォルダ内のものとなります。

js/lang/player/skinフォルダの作成

次にShadowbox.jsを利用するために、必要なJavascript/CSS/画像などをダウンロードしたファイル群からコピーします。

HTML（index.html）が存在すフォルダにjsフォルダを作成し下記ダウンロードファイルをコピーします。また、当然ですがjQuery本体（jquery.js）もこのフォルダに用意します。

src/shadowbox.js

Shadowbox.js本体です。HTML内でscriptタグを使って読み込む必要があります。

src/adapter/shadowbox-jquery.js

Shadowbox.jsがjQueryと連動するためのアダプタです。こちらもHTML内でscriptタグを使って読み込む必要があります。
同じ場所にsrcフォルダ下のskin、lang、playerの3つのフォルダをコピーします。

skinフォルダ

ローディング画像やCSSなど用意されており、後述するスキンの指定を変えることにより見た目を簡単に変更することができます。

langフォルダ

拡大表示領域内に表示される文字の言語に対応するJSファイルが用意されています。こちらも後述しますが、英語なら「loading」などの文字、他の言語を指定することにより中国語やフランス語に切り替えることが出来ます（残念ながら現在日本語はありません⁠）⁠。

playerフォルダ

静止画やFlashなど拡大表示領域内に読み込むメディアタイプごとにJSファイルが用意されています。下記のように様々なメディアタイプに対応しています。

JSファイル	対応メディア
shadowbox-img.js	画像（GIF/JPEG/PNG）
shadowbox-swf.js	Flash（SWF）
shadowbox-flv.js	Flash Video（FLV）
shadowbox-qt.js	QuickTime
shadowbox-wmp.js	Windows Media Player
shadowbox-iframe.js	IFRAMEでコンテンツを表示
shadowbox-html.js	HTMLコンテンツ

初期設定

ファイルが用意できたところでHTMLに初期設定のJavascriptを記述していきます。読み込むJSファイルはjsフォルダ下のjquery.js、shadowbox-jquery.js、shadowbox.jsとなります。

初期設定コード

<!-- jQuery本体 -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- jQueryアダプタ -->
<script type="text/javascript" src="js/shadowbox-jquery.js"></script>
<!-- プラグイン自身 -->
<script type="text/javascript" src="js/shadowbox.js"></script>

<script type="text/javascript">

  <!-- スキンの指定 -->
  Shadowbox.loadSkin('classic', 'skin');
  <!-- 言語の指定 -->
  Shadowbox.loadLanguage('en', 'lang');
  <!-- プレイヤーの指定 -->
  Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'player');
  
</script>

JSファイルの読み込みが終わったら、Shadowbox.loadSkin/Language/Playerメソッドでスキン、言語、プレーヤーの設定を行います。どのメソッドも第1引数は指定する値、第2引数で指定値が参照するファイルを持つフォルダを設定する形になっています（ここではskin、language、playerフォルダが該当します⁠）⁠。

スキンの指定: skinフォルダ内のスキンを指定します。スキンには画像やCSSファイルなどが含まれており、拡大表示領域の見た目の部分を担っています。今回はデフォルトで用意されているclassicを指定しています（skinフォルダ下のclassicフォルダを指定しています⁠）⁠。
言語の指定: 拡大表示領域で使用される文字の言語の指定をします。langフォルダ内にshadowbox-XX.jsというJSファイルが幾つかあり、そのXXの部分を指定します。今回は英語（en）を指定しています（langフォルダ下のshadowbox-en.jsを指定しています⁠）⁠。
プレイヤーの指定: 拡大表示領域で利用するプレーヤーの指定を行います。言語の指定と同様にplayerフォルダ内にshadowbox-XX.jsというJSファイルが幾つかあります、そのXXの部分を指定します。プレーヤーは複数指定でき、今回は使えるプレーヤー全てを指定しています。

基本的な使い方

さて、Shadowbox.jsの準備が終わりましたので、次は使い方の説明です。以下のコードを見ていただくと、こちらも簡単な記述でShadowbox.jsが利用できることがわかります。

基本コード

<head>
  <!-- jQuery本体 -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <!-- jQueryアダプタ -->
  <script type="text/javascript" src="js/shadowbox-jquery.js"></script>
  <!-- プラグイン自身 -->
  <script type="text/javascript" src="js/shadowbox.js"></script>
  <script type="text/javascript">
    <!-- スキンの指定 -->
    Shadowbox.loadSkin('classic', 'skin');
    <!-- 言語の指定 -->
    Shadowbox.loadLanguage('en', 'lang');
    <!-- プレイヤーの指定 -->
    Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'player');

    $(function(){
      <!-- 0. aタグに対してShadowboxを適用 -->
      Shadowbox.init();
    });

  </script>
</head>
<body>

  <!-- 1. 簡単な画像の表示 -->
  <a rel="shadowbox" href="image.jpg" title="画像"><img src="image-thumb.jpg"/></a>

  <!-- 2. Flashの表示とグループ化 -->
  <a rel="shadowbox[flash]" href="flash1.swf" title="FLASH">Flash1</a>
  <a rel="shadowbox[flash]" href="flash2.swf" title="FLASH">Flash2</a>

  <!-- 3. FLVプレーヤーで動画(FLV)の表示 -->
  <a rel="shadowbox" href="movie.flv" title="動画">動画</a>

  <!-- 4. IFRAMEでHTMLコンテンツの表示とサイズ指定 -->
  <a rel="shadowbox;width=800;height=600" href="http://www.google.co.jp" title="HTML">Google</a>

</body>

0. aタグに対してShadowboxを適用: Shadowbox.initメソッドを用いることにより、Shadowbox.jsの効果をrel属性にshadowboxが指定されたaタグに適用することができます。適用されたaタグはクリックするとhref属性に指定された画像、動画、Flash、HTMLコンテンツなどを拡大表示します。拡大表示時、aタグのタイトル属性の値が左上に表示されます。
1. 簡単な画像の表示: href属性に画像ファイルを指定するだけで実現できます（imgプレーヤーをロードしていることが前提となります⁠）⁠。
2. Flashの表示とグループ化: href属性にSWFファイルを指定するだけで実現できます（swfプレーヤーをロードしていることが前提となります⁠）⁠。また、rel属性に指定しているshadowboxの後ろに[任意の名前]を続けることでグループ化を行うこともできます。グループ化されたコンテンツは拡大表示領域の下部にスライドショー的なコントロールがつきます。
3. FLVプレーヤーで動画（FLV）の表示: href属性にFLVファイルを指定するだけで実現できます（flvプレーヤーをロードしていることが前提となります⁠）⁠。ただし、HTMLファイルと同じ場所にダウンロード&展開したフォルダ直下にあるflvplayer.swfをコピーしておく必要があります。
4. IFRAMEでHTMLコンテンツの表示とサイズ指定: href属性にHTMLコンテンツを指定するだけで実現できます（iframeプレーヤーをロードしていることが前提となります⁠）⁠。また、rel属性に指定しているshadowboxの後ろに;width=xxx;height=yyyをつけることにより拡大領域の幅と高さを指定することもできます。

指定できるオプション

オプションの指定の仕方は2通りあります。まず全体に対して同じオプションを指定したい場合ですが、下記のようにJavascriptでShadowbox.initメソッドの引数として指定します。

オプションの一括指定

$(function(){
  var options = {
    animSequence  : 'wh',
    overlayOpacity: 0.8,
    overlayColor  : '#000000',
    resizeDuration: 0.55,
    fadeDuration  : 0.35,
    handleOversize: 'resize',
    initialHeight : 160,
    initalWidth   : 320
  };  
  Shadowbox.init(options);
});

次に、ひとつひとつに対し個別のオプションを指定したい場合は、Shadowbox.jsが適用されているaタグのrel属性に指定しているshadowboxに続く形で指定することができます。

オプションの個別指定

<a rel="shadowbox;options={animSequence:'wh',overlayOpacity:0.8,overralColor:'#000000'}" href="test.swf" title="FLASH"">Flash</a>

animSequence

拡大表示するまでのアニメーションの種類を指定することが出来ます。種類はwh、hw、syncの3つが指定できです（デフォルト値はwh⁠）⁠。whは拡大表示領域が横に広がってから縦に広がるというアニメーションに対し、hwはその逆の縦に広がってから横に広がるアニメーションとなっています。syncは横、縦同時に広がっていくアニメーションとなります。

overlayOpacity

オーバーレイの透明度を指定します（デフォルト値は0.8⁠）⁠。1を指定すると、不透明となります。

overlayColor

オーバーレイの色を指定します（デフォルト値は#000000⁠）⁠。

resizeDuration

ページがオーバーレイされてから拡大表示されるまでのスピードを、秒単位で指定することが出来ます（デフォルト値は0.55⁠）⁠。

fadeDuration

ページがオーバーレイされるまでのスピードを秒単位で指定することが出来ます（デフォルト値は0.35⁠）⁠。

handleOversize

拡大表示領域に表示されるコンテンツがブラウザのウィンドウサイズより大きく、全て入りきらない場合の設定を指定することができます。none、resize、dragの3つが用意されています（デフォルト値はresize⁠）⁠。

resizeは拡大表示領域の大きさに合わせて画像の大きさもリサイズします。noneは拡大表示領域の大きさに入りきらないサイズの画像でもそのままの大きさの画像サイズで表示し、はみ出した部分は切れてしまいます。

dragは画像サイズはそのままですが拡大表示領域内でドラッグしてはみ出した部分も見ることができるようになります。

initalHeight,initalWidth

拡大表示領域の初期のサイズを指定することができます（デフォルト値は160x320px⁠）⁠。このサイズから表示されるコンテンツの大きさへと拡大または縮小する形になります。

ThickBox

ThickBoxも画像を拡大表示するライブラリとして有名ですが、こちらはは画像表示だけでなく、HTMLコンテンツを表示する機能を使って本体のウィンドウと連携する使い方も紹介していきます。

ダウンロード

まずはこちらから、プラグインと各種必要なファイルをダウンロードします。もちろんjQuery本体も必要となります。

ダウンロードするファイルは、プラグイン本体であるthickbox.js、各種スタイルを記述したthickbox.css、そしてロード中に表示するloadingAnimation.gifとなります。

基本的な使い方

こちらも使い方は簡単で、上記でダウンロードしたファイルをHTML上で読み込み、aタグにclass="thickbox"を付与するだけで、ThickBoxの効果を適用できます（loadingAnimation.gifはimagesフォルダの下にあることを前提とします⁠）⁠。

基本コード

<head>
  <!-- 必要なファイルの読み込み -->
  <link rel="stylesheet" href="css/thickbox.css" type="text/css"/> 
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/thickbox.js"></script>
</head>
<body>
  <!-- 1. 簡単な画像の表示 -->
  <a href="images/single.jpg" title="single" class="thickbox">
    <img src="images/single_t.jpg" alt="single"/>
  </a>
  <!-- 2. 画像のグループ化 -->
  <a href="images/plant1.jpg" title="plant1" class="thickbox" rel="plant">
    <img src="images/plant1_t.jpg" alt="plant1" />
  </a> 
  <a href="images/plant2.jpg" title="plant2" class="thickbox" rel="plant">
    <img src="images/plant2_t.jpg" alt="plant2" />
  </a> 
  <!-- 3. AJAXを用いた外部コンテンツの表示 -->
  <a href="ajax.html?height=85&width=250&modal=true" class="thickbox" title="AJAX">AJAX</a>
</body>

ajax.html（AJAX取得先外部コンテンツ）

<a href="javascript:void(0)" onclick="tb_remove()">Ajax</a>

1. 簡単な画像の表示: aタグのhrefで指定した画像が拡大表示します。拡大表示領域下部には、title属性で指定した値が表示されます。
2. 画像のグループ化: さらにrel属性に適当な名前を指定することで複数のthickbox効果のかかったaタグをグループ化することもできます。グループ化されたコンテンツは拡大表示領域の下部にスライドショー的なコントロールがつきます。
3. AJAXを用いた外部コンテンツの表示: 外部のHTMLコンテンツもAJAXを用いることにより、拡大表示させることもできます。この場合、aタグのhref属性に該当するコンテンツ（HTMLファイル）を指定し、その後にGETパラメータのように下記オプションを指定することができます。

option	内容
height	拡大表示領域の高さです
width	拡大表示領域の幅です
modal	trueを指定するとtb_remove()関数を実行して拡大表示領域を閉じる形となります

iFrameを使ったThickBoxの応用例

最後に、最近のサイトでよく見かける、入力フォームのダイアログ表示とダイアログで選択した内容を本体のウィンドウに反映させるThickBoxを用いた仕組みを、簡単に紹介します。

本体ウィンドウの作成

まずは本体のウィンドウとなるHTML（main.html）を記述します。

main.html

<head>
  <!-- 必要なファイルの読み込み -->
  <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen"/> 
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/thickbox.js"></script>
  <!-- 2. ダイアログから受け渡された配列をHTMLに書き出す -->
  <script type="text/javascript">
    function copy_checkbox(clist, divname){
      var ihtml = new String();
      for (i = 0; i < clist.length; i++){
        ihtml += "<input type='checkbox' value='1' name='" + clist[i].cname + "'"+ "checked>";
        ihtml += clist[i].text + "<br>";
      }
      $(divname).html(ihtml);
    }
  </script>
</head>
<body>
  <!-- 1. ThickBoxへのパラメータを記述 -->
  <a href="sub.html?TB_iframe=true&height=300&width=600" title="表示する" class="thickbox">表示する</a>
  <div id="inputarea"></div>
</body>

0. 対象となるHTMLタグを用意

ThickBoxの対象となるHTMLタグを用意します。対象となるタグはダイアログ表示したhtmlへのリンクとThickBoxのパラメータが書かれたaタグ、ダイアログからの連携先となるdivタグになります。

1. ThickBoxへのパラメータを記述

ダイアログ表示したいsub.htmlへのリンクに対し、以下のような記述をしていきます。

<a href="sub.html?TB_iframe=true&height=300&width=600" title="表示する" class="thickbox">

href属性内の?以降のプロパティと解説とその他の属性の解説は以下のようになります。

TB_iframe ……インラインフレームでの表示の有無です。今回はインライン表示したいのでtrueになります。
height ……表示するダイアログの縦幅の大きさになります。
width ……表示するダイアログの横幅の大きさになります。
title属性 ……表示するダイアログのタイトル表記になります。
class属性 ……ここは固定で"thickbox"と記述しないと動作しません。

2. ダイアログから受け渡された配列をHTMLに書き出す

関数copy_checkboxを記述します。これは指定されたdivに渡された配列の内容をcheckboxタグとして書き出す内容になっています。実際、関数はThickBoxのダイアログから呼び出される形となります。

ダイアログウィンドウの作成

次にダイアログとなるHTML（sub.html）を記述します。

sub.html

<head>
  <!-- 必要なファイルの読み込み -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <!-- 1. チェックしたデータを配列に格納し本体ウィンドウの関数を呼び出す -->
  <script type="text/javascript">
    function p_submit(){
      var clist = new Array();
      $("input[@type='checkbox']").each(function(){
        if($(this).attr("checked") == true){
          var obj = new Object();
          var value = $(this).attr("value");
          obj.cname = $(this).attr("name");
          obj.text = $("#" + value).html();
          clist.push(obj);
        }
      });
      parent.copy_checkbox(clist,"#inputarea");
      self.parent.tb_remove();
    }
  </script>
</head>
<body>
  <ul>
    <li>
      <input type="checkbox" name="sample1" value="1">
      <span id="1">サンプル１</span>
    </li>
    <li>
      <input type="checkbox" name="sample2" value="2">
      <span id="2">サンプル２</span>
    </li>
    <li>
      <input type="checkbox" name="sample3" value="3">
      <span id="3">サンプル３</span>
    </li>
  </ul>
  <input type="button" value="追加する" onclick="javascript:p_submit()">
</body>

0. 対象となるHTMLタグを用意

まず、連携の対象となるHTMLタグを用意します。ここでは本体ウィンド送る値を指定するcheckboxタグを用意しています。次に、inputタグで次に紹介するjavascriptを実行するボタンを用意しています。

1. チェックしたデータを配列に格納し本体ウィンドウの関数を呼び出す

関数p_submitを記述します。これは選択済みのcheckboxを取得し配列に格納した後、本体ウィンドウにその値を表示する内容となっています。実際、本体ウィンドウに値を表示する部分は、parent.copy_checkboxが担っています。

また、最後にダイアログをクローズするため、上述したself.parent.tb_removeも呼び出しています。

まとめ

今回はShadowbox.jsを用いたマルチメディア系の拡大表示と、ThickBoxを用いたHTMLコンテンツのダイアログ表示と本体ウィンドウへの反映を簡単に紹介してきました。

jQuery Fancyzoomとあわせて、LightBox系の表現を適材適所で利用してみてください。

次回はメニュー系のプラグインを紹介します。