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

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

  • 2009-04-10 (金) 8:38
  • blog
  • |
Google Adsense

Shadowbox JS | Sivel.net

ちょうど去年くらいか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

General
基本的なオプション。

Javascript Library
利用する汎用Liblaryを選択する。選択出来るのはYUIprototypejQueryExtDojoMootool、そして汎用Liblaryなし、の合計7項目。
Shadowbox Skin
Shadowbox.jsはスキンセット変えるだけでデザインを変更する事が出来る、ここでは既に用意されている4つのスキンと、スキン無しの5項目から選択。
Language
様々な言語に対応しているので、ここで利用したい言語を選ぶ事が出来る…のだが、日本語がねえええええ!俺とちがって機械翻訳無用なイケメンが作者にコンタクトとってほしいと切に願う。

Hacks

Hack
細かい設定。

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

Advanced Configuration

Advanced Configuration

“Show Advanced Configuration”ボタンを押し、追加される項目。
Show Advanced Configuration
画像が表示されるモーションとか細かい部分にこだわりたい人以外はいじる必要はない。

Animate
これをfalseにする事で、フェードを除くアニメーションエフェクトを無効にできる。重いと感じたらfalseにしてみるのもいいかも。
Fade Animations
フェードアニメーションエフェクトを無効にできる。
Animation Sequence
サイズが変わる際のアニメーションを設定できる。whhwsyncの三種類が選べ、それぞれ“横幅→縦幅”、“縦幅→横幅”、“同時”の流れでアニメーションしサイズが変わる。
Modal
拡大表示したコンテンツの周りの半透明部分をクリックしても、閉じて元の表示に戻らないようにするか。tureで半透明部分をクリックしても無効、falseでクリックすると閉じる。
Overlay Color
半透明部分の色を#と16進法で設定できる。
Overlay Opacity
半透明部分の透明度を設定する、1.0で不透明、0.0で透明なので1~0の間で数値設定する。
Flash Background Color
Flashを表示している際の背景色。
Auto-Play Movies
動画を表示する際、自動再生するかどうか。
Show Movie Controls
QuickTimeWindows 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 Automation
指定ファイルのタグに自動的にshadowboxのための属性を追加する。

Image Links
画像ファイルリンクに属性付与。
Movie Links
動画ファイルリンクに属性付与。
Music Links
音楽ファイルリンクに属性付与。
YouTube and Google Video Links
YouTubeとGoogle Videoに属性付与。

Resets

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をどうにかしてほしいところだが、それ以外は快適に利用できている。

Comments (Close):6

sged 09-04-15 (水) 1:29

はじめまして。sged と申します。
wordpress 用の shadowboxプラグインがあるのを知らず、
shadowbox を独自に組み込んだんですが、もうまく動かず途方にくれていたところ、
こちらのページで、wordpress 用のプラグインがあるのを知りました。
さっそく導入したところ、すんなり動きました・・・勉強不足でお恥ずかしい・・・
shadowbox の解説、大変助かりました。ありがとうございました。
またいろいろと勉強させてもらいます。
それでは~。

daruman 09-04-15 (水) 19:30

はじめまして!
お役に立てたようで何よりです。
このpluginはShadowbox.jsを適用させるだけなので、ページを表示した際どこもクリックする前にフローティングボックスを表示させてhtmlなどでお知らせを表示、とかする場合は手作業で導入したほうがやりやすいかもしれません。
単にメディアをフローティング表示するだけならこのpluginで充分なのでおすすめです!

hz354 09-06-30 (火) 19:05

初めまして。
Shadowboxを実装初心者です。
詳細な解説がなされていて大変参考にさせて頂いております。

1点ご教授頂きたいのですが
Auto-Play Movies でSwf 自動再生がありありますが、
swf再生後に自動でShadowboxをクローズさせたく思っております。
swf上でasにcloseへのパスを記載すれば活けるのでしょうか?
そのパスもお教え頂ければ幸いです。
よろしくお願いします。

daruman 09-06-30 (火) 19:26

はじめましてhz354さん!
shadowboxはload時にオブジェクトを作ってるんで、そのメソッドをas側から呼べばいいんじゃないかなと思ってます。
ちなみに閉じる際はまんまcloseってメソッドを呼んでるぽいんで、Shadowbox.close()なんて感じでswfの再生の最後に呼び出してあげればいけるはずです。
(ためしにShadowboxで画像開いてShadowbox.close()をfirebugのコンソールで実行したら普通に閉じました)
asはもう何年もいじってないので全然自信がないのですが、ExternalInterfaceクラスをimportしてcallメソッドで呼び出せた…んでしたっけ^^;
as2.0時代はfscommand()を使った気がしますが…。
asのほうはまったく自信が無いですが、大体の流れはこんな感じでいけるかと思います。
頑張ってください。

hz354 09-07-01 (水) 14:50

daruman さま
早々のご回答ありがとうございます!

早速試したところバッチリ動きました。
as2で『Shadowbox.close()』タイムライン設置で完了できました。
ホント感謝です!

これからも本サイトで勉強させていただきます。
記事も楽しみにしております。

daruman 09-07-01 (水) 19:21

お役に立てたようでなによりです!

Trackbacks (Close):5

pingback from hetemlでwordpressのプラグイン“Shadowbox JS”を使う場合の留意点 - atl*weblog 09-06-17 (水) 4:20

[...] Shadowbox JS LightBox系のjsライブラリ・Shadowboxをwordpressに簡単実装するplugin – atl*weblog javascriptを読み込む際にonloadの記述がチョロくて、場合によっては他のjavascriptやliblary、javascriptを利 [...]

pingback from North Wind » Blog Archive » Lightbox PlusからShadowbox.jsに変更 - 09-12-22 (火) 3:51

[...] こちらの方が詳しく書いてくれています atl*weblog – Shadowbox JS LightBox系のjsライブラリ・Shadowboxを wordpressに簡単実装するplugin Shadowbox.jsは動作がとてもいい それに余計な装飾が無 [...]

trackback from Unformed Building 10-01-27 (水) 15:47

WordPress のプラグイン「Shadowbox JS」の日本語用言語ファイルを作った

WordPress のプラグイン「Shadowbox JS」の日本語用言語ファイルを作ったので配布します。…

pingback from ru_426 » Blog Archive » wordpress プラグイン shadowbox-js 10-09-29 (水) 1:59

[...] atl*weblog さんの記事を参考にさせていただきました。 [...]

pingback from wordpress プラグイン shadowbox-js | ru_426 11-01-02 (日) 1:03

[...] atl*weblog さんの記事を参考にさせていただきました。 [...]

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

Calendar
« 2017 年 2月 »
M T W T F S S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28          
Search
ABM | AnotherBookmark™
heteml
heteml
amadana
amadana(アマダナ)
feed
Meta

Return to page top