Shadowbox JS　LightBox系のjsライブラリ・Shadowboxをwordpressに簡単実装するplugin

ちょうど去年くらいかLightbox系のjavascriptLiblaryを探していて、当時の時点でめぼしいものを片っ端から試した結果、Shadowbox.jsが一番気に入った。
そんな経緯からwordpressでもshadowbox.jsを使うべく、自動で挿入してくれるpluginを導入しているのでいつもどおり備忘録がてら紹介。
個人的にはこのplugin自体より、ちょっとコンフリクトしたのでそれへの対応方法なんかがメインだったり。

Shadowbox.jsとは

Shadowbox.jsはページ内で画像を拡大表示したりするLightbox系のjavascriptLiblary。
以下公式サイトで動作サンプルを見る事が出来る。

Shadowbox.js Media Viewer

なぜ数あるLightbox系Liblaryからこれを選んだのか。
冒頭に書いたように使い始めたのが大分前なのですっかり理由は覚えてないが、以下のような特徴がある。

1. マークアップがvalidである
2. prototypeやjquery等、数種類の汎用Liblaryを利用して使う事が出来る
3. 汎用Liblary無しでも使える
4. 画像だけでなくhtmlからmovie等、さまざまな形式を表示可能
5. flvのシークバーとかのswfが用意されていて、flvも表示できたり

他にもスキンでデザイン変更可能だとか、オプションが豊富で結構カスタマイズ可能だとか色々あるんだけど、今回はこれ自体の紹介じゃないし公式サイトが英語ながら結構丁寧にかかれてるんでこんなもんで。
かつて使った時には利用するLiblaryにあわせてダウンロードするShadowbox.jsの構成ファイルやら中身が変わってたのだが、今は1セットで全てまかなっているようだ、楽でいい。

とりあえず、探した当時はかなり多機能な部類だったと思うし、今も更新頻度がそこそこあるようで結構オススメ。
ただし商用利用にはライセンス料を払う必要があるので注意。

Shadowbox.jsを利用するには

Shadowbox.jsを普通に利用するにはだいたい以下のような手順で導入する。

1. 導入したいページにShadowbox.jsで利用するcssをリンクする
2. もし汎用Liblaryを利用する場合はShadowbox.jsより先にscriptタグで読み込む
3. Shadowbox.jsをscriptタグで読み込ませる
4. 初期化メソッドを実行する、細かい設定を変更したいならこの際引数にオブジェクトで設定をメソッドに渡す
5. フローティングウィンドウで表示したい要素にrel="shadowbox"を追加する

大体こんな感じだったっけかな、たぶん。
細かいカスタマイズは初期化メソッドに渡すオブジェクトや、rel="shadowbox"に数値加えたり、同じ要素にtitleつけたりとかであれこれできる。
見てもらえばわかるように、cssやjavascriptの読み込みは勿論、画像や動画に一々rel="shadowbox"を付けるのはちょっと、めんどくさい。
そこでpluginの出番になる。

Shadowbox JS

そんなShadowbox.jsを簡単にwordpressで使えるようにしてくれるpluginがこのShadowbox JSだ。
他のLightbox系Liblaryを導入するpluginと同様に、必要なcssやjsファイルの読み込みや、記事内の指定要素（img等）に自動的にrel="shadowbox"を割り振ったり、汎用Liblaryを選択出来るShadowbox.jsならではの機能も備えている。

ちなみに正常動作してる今現在のwordpressのヴァージョンは2.7.1。

試したヴァージョン

2.0.4.1

対応するwordpressの最新バージョン表記

2.6 or higher

plugin page

WordPress > Shadowbox JS << WordPress Plugins

auther page

Shadowbox JS | Sivel.net

管理画面

いつもどおり、機械翻訳と察する能力をフルに活用した駄訳。

General

基本的なオプション。

Javascript Library

利用する汎用Liblaryを選択する。選択出来るのはYUI、prototype、jQuery、Ext、Dojo、Mootool、そして汎用Liblaryなし、の合計7項目。

Shadowbox Skin

Shadowbox.jsはスキンセット変えるだけでデザインを変更する事が出来る、ここでは既に用意されている4つのスキンと、スキン無しの5項目から選択。

Language

様々な言語に対応しているので、ここで利用したい言語を選ぶ事が出来る…のだが、日本語がねえええええ！俺とちがって機械翻訳無用なイケメンが作者にコンタクトとってほしいと切に願う。

Hacks

細かい設定。

Internet Explorer 8 Hack

IE8を閲覧環境に想定する場合、IE7互換モードで表示させるmetaタグを追加する事が出来る。ちなみに<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />ってな感じのぶつ。

Advanced Configuration

“Show Advanced Configuration”ボタンを押し、追加される項目。

画像が表示されるモーションとか細かい部分にこだわりたい人以外はいじる必要はない。

Animate

これをfalseにする事で、フェードを除くアニメーションエフェクトを無効にできる。重いと感じたらfalseにしてみるのもいいかも。

Fade Animations

フェードアニメーションエフェクトを無効にできる。

Animation Sequence

サイズが変わる際のアニメーションを設定できる。wh、hw、syncの三種類が選べ、それぞれ“横幅→縦幅”、“縦幅→横幅”、“同時”の流れでアニメーションしサイズが変わる。

Modal

拡大表示したコンテンツの周りの半透明部分をクリックしても、閉じて元の表示に戻らないようにするか。tureで半透明部分をクリックしても無効、falseでクリックすると閉じる。

Overlay Color

半透明部分の色を#と16進法で設定できる。

Overlay Opacity

半透明部分の透明度を設定する、1.0で不透明、0.0で透明なので1～0の間で数値設定する。

Flash Background Color

Flashを表示している際の背景色。

Auto-Play Movies

動画を表示する際、自動再生するかどうか。

Show Movie Controls

QuickTimeとWindows Media playerのコントローラー部分を表示するかどうか。

Slideshow Delay

スライドショー表示の際、次の画像へ移動する時間を設定する。

Resize Duration

リサイズする際のアニメーション速度。ちなみにリサイズってのはコンテンツをクリックすると表示領域の四角がグイングインうごいてウィンドウの大きさに丁度いい具合になるあの動きのこと。

Fade Duration

フェードアニメーションの時間。

Display Navigation

ギャラリーナビゲーションコントロールを表示するかどうか。画像とか表示してる時右下に出てくる次へボタンや閉じるボタンの事。

Continuous

ギャラリー機能を使うかどうか。

Display Counter

画像とかが複数ある場合、今何枚目かとかの表示を出すかどうか。画像だと左下に2/4とかある場合、表示中のページにshadowboxで表示出来る画像が4つあって、今そのうち2番目だよ、って表示が出たりする、これ出すかどうかを設定出来る。

Counter Type

ギャラリー機能時のカウンターの種類を2種から選択出来る。

Counter Limit

上のCounter Typeでskipを選択した場合のリンク数の上限を設定する。

Viewport Padding

コンテンツを表示領域いっぱいに表示した際の余白をpxで指定出来る。

Handle Oversize

表示しきれないほどでかい画像とかをどう扱うかを選択する。なしだと見える範囲で切り抜かれる。resizeだと縮小表示する。dragだと画像をドラッグして動かして見る事ができる。

Handle Unsupported

pluginがない場合、ダウンロード先へのリンクを表示したり出来る。

Initial Height

クリックした瞬間表示されるshadowboxの高さ。

Initial Width

クリックした瞬間表示されるshadowboxの幅。

Enable Keys

キーボードナビゲーションを有効にするかどうか。

Shadowbox Automation

指定ファイルのタグに自動的にshadowboxのための属性を追加する。

Image Links

画像ファイルリンクに属性付与。

Movie Links

動画ファイルリンクに属性付与。

Music Links

音楽ファイルリンクに属性付与。

YouTube and Google Video Links

YouTubeとGoogle Videoに属性付与。

Resets

リセットの設定。

Reset to Defaults

設定を全てデフォルトに戻す。

Delete Options for a Clean Uninstall

データベースに保存してある設定を削除する。

汎用Liblary無しで使う場合の注意点

必要な機能のほとんどを兼ね備えたこのplugin、prototype.jsやjQueryなどの汎用Liblaryと一緒に使う場合は問題ないのだが、これらLiblary無しで単独で使う際、少し困った問題に直面する。
それはjavascriptを読み込む際にonloadの記述がチョロくて、場合によっては他のjavascriptやliblary、javascriptを利用するpluginとコンフリクトする可能性があるのだ。

shadowbox-js.php 160行目

$shadowbox_init .= "	window.onload = (function(){\n";

Liblary使用なし設定で書き出されるコード

<!-- Begin Shadowbox JS -->
<script type="text/javascript">
	var shadowbox_conf = {
中略
	};
	window.onload = (function(){
		Shadowbox.init(shadowbox_conf);
	});
</script>
<!-- End Shadowbox JS -->

見ての通り、onloadで直接関数を実行しようとしちゃってる。
ちょっとjavascriptをいじれる人なら分かるように、onloadに直接指定できるのは一つだけであり、後から同様にonloadされると上書きされ、その前に指定された処理が無かった事になってしまうのだ。

俺の場合はこれでgoogle-code-prettifyが効かなくなってしまった。
そこであれこれやった結果、とりあえず出来た解決方法を二つ紹介。

pluginを書き換える方法

Shadowbox JSplugin自体を一部書き換えて、書き出されるコードを変えてしまうのがとりあえずは一番確実だ。
まず自分で用意したjavascriptを先に読むようにして、以下の関数を作っておく。

function addEvent(elm,listener,fn){
	try{
		elm.addEventListener(listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}

次に先ほど載せたshadowbox-js.phpの160行目を以下のように書き換える。

$shadowbox_init .= "	addEvent(window,"load",function(){";

これはまずonloadではなくaddEventListenerを使う事で、上書きではなく追加していく関数を呼び出すようにする。
皆大好きIE様はこれが動かないので、attachEventという独自実装の関数で代用する。
この関数はto-Rの情報を参考に（丸写し）させていただきました！

複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]

onloadが問題だった場合とりあえずこれで確実に動くようになるんだけど、これはこれで問題が。
なにせpluginを直接書き換えてるので、もし次このpluginがアップデートし、かつこの問題がスルーされていた場合、アップデートのたびにまた書き換え作業が発生するのだ。
そんなの面倒臭いじゃない＞＜

汎用Liblaryを導入する方法

そこで俺が取った方法がこれだった。
現時点で何もLiblaryを利用していなかったのだが、将来的にはどうせ利用しそうだし、今はこのためだけだけどとりあえずjQueryを使うようにした。
jQueryを選択した理由は、比較的軽いのと、ちょうど次に色々使っていこうかなと思っていた所だったから。
ちなみにそのまま導入してるわけじゃなく、Google Ajax Liblaryを利用し、html内でイニシャライズせず直で引っ張ってきている。

まとめ

このpluginはshadowbox.jsを適用させるためのものなので、shadowbox.jsが気に入れば充分有用だろう。
むしろLightboxのように様々なpluginがあるわけではないので、pluginで対応するならほぼ選択肢はないのだが。

shadowbox.js自体は多機能でカスタマイズ性も高く、フルスクラッチはしたくないけどあれこれ自分の好きなように変えたい人にはおすすめのliblaryだ。更新頻度も結構高いように見えるし。
ただ気になる点があって、今回紹介したpluginの設定にIE8 hackがある点だ。
IE7互換モードにするoptionがあるってことは、IE8標準モードでは動かないって事なのかな。
確認してないんでよくわからないけど、もしそうだとすると少し難しい事になる。
せっかく他のコンテンツをIE8標準でも見れるように作っていても、shadowbox.jsのためだけにIE7互換にしなくてはならなくなるという、残念現象が起きるからだ。
まぁいずれIE8の普及率が上がれば対応してくれると思うし、元々更新頻度が高いliblaryなのでほどなく解決版を出してくれそうな期待はある。

とりあえずpluginのほうはonloadをどうにかしてほしいところだが、それ以外は快適に利用できている。