Shadowbox JSを入れてみた。

まぁ最近よく見る、ページを移動せず画像の拡大表示できるアレ。lightbox風だね。

でも、画像だけでなく、Flash、QuickTime、Windows Media、Webの表示にも対応している点がいぃね。

[tegaki]一つのプラグインだけで、大抵のメディア表示をイィ感じでできるモノ！[/tegaki]

を捜していたので、ピッタリだったかな。試してみるぅ。
①まずは画像。

②次、ウェブページ
Google
ホームページ
③最後、
youtube

うん、できた。
あっ、Demoがまとまってるページはこちらで　→ Demo

オプションでは、ライブラリではJQuery、Prototype、Yahoo! User Interface Library、Ext、Dojo、MooToolsを選択でき、スキンも選べる。

また背景や透過度、サイズなどを変更できる。

けど、背景はあんまり、うまくいかないかな？

<使用方法>

①プラグイン入手＆有効化

まずhttp://wordpress.org/extend/plugins/shadowbox-js/ からダウンロード。

まぁいつものように、プラグインのディレクトリに入れて有効化。

②-1.　画像に適用

***2011/04/10***************************************
「aタグ」に下記のような設定を加えなくても、自動的に適用されることを確認しました。
また、同日記内の画像は同じギャラリーとしてくれます。
※「aタグ」に追加しても問題ありません。
*******************************************************

i)管理ページの投稿などで画像を追加する際、「リンクURL」と書かれている部分は「ファイルのURL」を選択。※「投稿のURL」だと正常に動作しない。

ii)「投稿編集」で「HTML」での書き込みにチェンジし、「a タグ」に　rel=”shadowbox“ を挿入するのみ。

ex)<a rel=”shadowbox” href=”http://groovy.hp2.jp/blog・・・

※すでに「rel」がある場合は削除してrel=”shadowbox“ に置き換える。

iii)連続して見れるようにするためには　rel=”shadowbox[album]“ にする。

※albumはグループ名で、勝手に決めれる。

②-2.　動画に適用

動画はちょっと特殊。上の例からだと、よくある埋め込みタグの

<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/BskQOSRyF_w&hl=ja&fs=1“></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/BskQOSRyF_w&hl=ja&fs=1″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>

の赤色の文字だけに注目して、

<a rel=”shadowbox[hoge];width=425;height=344” href=”http://www.youtube.com/v/BskQOSRyF_w&amp;hl=ja&amp;fs=1“>

と、書けばいぃ。

②-3. ホームページに適用

<a title=”Google” rel=”shadowbox[hoge]” href=”http://groovy.hp2.jp/“>ホームページ</a>として、ホームページに使おうとしたときhttp://groovy.hp2.jp/の場合、wwwがついていないため、webページだと認識してくれないっぽい。だから、blogとか表示したいときは、wwwをつけるか、http://groovy.hp2.jp/index.htmlのようにするべき。

結果

[tegaki]楽でしたぁ、終わり[/tegaki]