画像や動画をポップアップ表示してくれるプラグイン（Shadowbox JS）

wordpressの記事中で動画や画像をポップアップで表示してくれるプラグインを探していたのですが、
なかなか気に入るのがなくて困ってました。
デザイン的にも結構いいプラグイン（Post-thumb Revisited）を見つけたのですが、
設定方法がわからなくてそのプラグインはあきらめました。

Shadowbox JSのインストール

それで別のを探していたらデザイン的にもいいプラグインを(*｀Д『+』)ﾊｯｹﾝ!!
Shadowbox JSというプラグインです。

このプラグイン面倒な設定はいらないんです。
Post-thumb Revisitedはものすごく面倒な作業をしなければ表示できないですけど、
Shadowbox JSはほんとに楽に出来ます。

画像、動画、ウェブサイトまでポップアップ表示してくれます。
wordpressで画像や動画をポップアップで表示したいならぜひ入れてみてください。

Shadowbox JSのダウンロード

wordpressの公式からダウンロードできます。Shadowbox　JS＞wordpress

ダウンロードしたら、他のプラグインと同じようにwp-content/pluginsにうｐしてください。

Shadowbox JSの設定

プラグイン管理画面から有効にして設定タブのとこにShadowbox　JSが追加されますのでそこで設定します。

通常デフォルトの状態でも問題なく表示できます。

簡単な説明としては、

Javascript Library ：デフォルトで問題なし。

Shadowbox Skin：ポップアップされた表示が変わります。

Language：言語ですけど日本語はないのでデフォルトのenでいいと思います。

Hacks：これはIE８に関係するようなのですがよくわかりませんﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ

Shadowbox Automation（これはポップアップするかどうかの設定です。）

http://s-peace.com/wp-admin/media-upload.php?post_id=195&type=audio&TB_iframe=true

trueがする

falseがしない

Image Links ：画像をポップアップするかどうか

Movie Links ：動画をポップアップするかどうか
.
Music Links ：音楽をポップアップするかどうか

YouTube and Google Video Links　：youtubeなどのサイトリンクをポップアップするかどうか

下の二つは設定をデフォルトに戻すとこのプラグインを削除するです。

記事中への記入方法

サンプル

<a href=”image.jpg” rel=”shadowbox”>Image</a>

と記入するだけです。

画像をクリックして表示させる方法は、

<a href=”image.jpg” rel=”shadowbox”><img src=”image.jpg” alt=”" /></a>

通常、画像を表示するときにrel=”shadowbox”を書くだけです。

これだけでポップアップで表示されるようになりますヾ(〃’(ェ)’〃)ノワーイ♪

ほかにも表記を変えたりしたらスライドショー見たいに表示できるようになるみたいです。
いろいろ試してみます(`Д´)ゞ ﾋﾞｼｯ!!

※追記
いろんな表示方法をまとめて見ました。→Shadowbox JSの設定方法（いろいろな表示方法）

動画表示例

テキストタイプ
youtube動画

画像タイプ

END

追記

自分は通常FireFoxやGoogleのブラウザ使ってるのですが、
それで作成していてちゃんと表示されているからなにも考えてませんでしたが、
ちょっと問題が発生しました(A´･ω･) ｱｾｱｾ

IE６で見て見たら表示がバグるのです。
クリックしても表示されないなと思っていたら、サイトの上部に表示されていました。(〃－｀ω´－)ﾝｰ

(”;)オドオド・・・

いろいろ調べて見たら、IE6がCSSのプロパティ、positionのfixedをサポートしてないかららしい。。。

IE６、、、しっかりしてくれよ(；・∀・)ﾀﾞ､ﾀﾞｲｼﾞｮｳﾌﾞ…?

IE７からはしっかり表示してくれるみたいだけど、IE６ではダメみたい。

IE６でも表示させる方法もありはします。
その方法は、xml宣言を記述しないだけ。

<?xml version=”1.0″ encoding=”UTF-8″ ?>

こんなの。

この記述を外したらIE6でもちゃんと表示できるようになりました。
でもこの宣言は結構重要なんですよね～。

Htmlを正しく記入して頑張って100点にしてんのにこれを外しただけで90点になってまうｱｶﾝ((>ε<｡ )(｡ >з<))ｱｶﾝ
サイトのHtml文書の文法を採点してくれるとこ→Another HTML-lint gateway

他の方法を探してみたけど、自分には無理でしたヾﾉ･´ω`･)㍉㍉

どっちを取るか考えたけど、これから先IE６はなくなるだろうからもうこのままでいいということにしときますｗｗｗ