- 2009-04-02 (木) 20:27
- plugins
wordpressの記事中で動画や画像をポップアップで表示してくれるプラグインを探していたのですが、
なかなか気に入るのがなくて困ってました。
デザイン的にも結構いいプラグイン(Post-thumb Revisited)を見つけたのですが、
設定方法がわからなくてそのプラグインはあきらめました。
Shadowbox JSのインストール
それで別のを探していたらデザイン的にもいいプラグインを(*`Д『+』)ハッケン!!
Shadowbox JSというプラグインです。
このプラグイン面倒な設定はいらないんです。
Post-thumb Revisitedはものすごく面倒な作業をしなければ表示できないですけど、
Shadowbox JSはほんとに楽に出来ます。
画像、動画、ウェブサイトまでポップアップ表示してくれます。
wordpressで画像や動画をポップアップで表示したいならぜひ入れてみてください。
Shadowbox JSのダウンロード
wordpressの公式からダウンロードできます。Shadowbox JS>wordpress
ダウンロードしたら、他のプラグインと同じようにwp-content/pluginsにうpしてください。
Shadowbox JSの設定
プラグイン管理画面から有効にして設定タブのとこにShadowbox JSが追加されますのでそこで設定します。
通常デフォルトの状態でも問題なく表示できます。
簡単な説明としては、
Javascript Library :デフォルトで問題なし。
Shadowbox Skin:ポップアップされた表示が変わります。
Language:言語ですけど日本語はないのでデフォルトのenでいいと思います。
Hacks:これはIE8に関係するようなのですがよくわかりませんヘ(゚∀゚ヘ)アヒャ
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´・ω・) アセアセ
IE6で見て見たら表示がバグるのです。
クリックしても表示されないなと思っていたら、サイトの上部に表示されていました。(〃?`ω´?)ンー
(”;)オドオド・・・
いろいろ調べて見たら、IE6がCSSのプロパティ、positionのfixedをサポートしてないかららしい。。。
IE6、、、しっかりしてくれよ(;・∀・)ダ、ダイジョウブ…?
IE7からはしっかり表示してくれるみたいだけど、IE6ではダメみたい。
IE6でも表示させる方法もありはします。
その方法は、xml宣言を記述しないだけ。
<?xml version=”1.0″ encoding=”UTF-8″ ?>
こんなの。
この記述を外したらIE6でもちゃんと表示できるようになりました。
でもこの宣言は結構重要なんですよね?。
Htmlを正しく記入して頑張って100点にしてんのにこれを外しただけで90点になってまうアカン((>ε<。 )(。 >з<))アカン
サイトのHtml文書の文法を採点してくれるとこ→Another HTML-lint gateway
他の方法を探してみたけど、自分には無理でしたヾノ・´ω`・)??
どっちを取るか考えたけど、これから先IE6はなくなるだろうからもうこのままでいいということにしときますwww
Comments:0
Trackbacks:2
- Trackback URL for this entry
- http://s-peace.com/195.html/trackback
- Listed below are links to weblogs that reference
- 画像や動画をポップアップ表示してくれるプラグイン(Shadowbox JS) from FORGET
- trackback from 外部記憶 09-05-25 (月) 23:58
-
WordPress で 画像をポップアップするプラグイン…
MovableType では、エントリ中に画像を挿入する際、埋め込みかポップアップを選択することができたのだけれど、WordPress では埋め込みがデフォルト。
ちょっと寂しいので、こちらで教え…. - pingback from LIghtBoxって? – 石本 Web 09-10-29 (木) 18:07
-
[...] 最近、LIghtBoxって言葉があふれておりまして、何ぞや?と思っておりましたら、なんか、画像などを表示するポップアップ形式なんだってことがわかりまして、よく考えたら、最近見るホームページやブログなどにあふれているので、自分も使ってみようかと思ったわけです。 実は、これOpenPneで作ったSNSにも導入したんだけど、結構あちこちいじったので面倒だなぁと思ったんですが、WordPressの場合、メディアのアップロードにflashを使っているので簡単に使えるものがあるんじゃないかと検索してみた。そしたら、LightBox風なんですが、ShadowBoxjsというプラグインが簡単そうで、詳しく解説してくれる人がいたので、このプラグインを使用することに決定。 さてセットアップ。 ■まずはダウンロード Shadowbox JS>wordpress←公式サイトから。wordpressの管理画面で検索してもダウンロードできます。 ダウンロードして、zipファイルを解凍したら、Pruginフォルダーにコピー。 ■セットアップ プラグイン→インストール済で、有効化。ほとんどデフォルトで大丈夫なはず。 設定なんかに関しては、 このページを見ればよくわかるかな。 [...]


