iBox というのはサムネイルをクリックすると Web2.0 ちっくにオーバーレイ表示してくれる、そんなスクリプトです。同様のものでは Lightbox JS というのが有名で、ぼくも以前使っていたのですが、乗り換えてみました。
けっこう前の記事で恐縮ですが、歩行者さんが紹介されていたので知りました。すみません、ようやく試してみましたよ。
さらに、これが WordPress のプラグインになってるのも orioa さんの記事で知りました。せっかくなので、こちらの方式で導入してみることにしました。
iBox の使いかた
iBox の使いかたは LightBox JS とほぼ同じです。zip ファイルを解凍すると、サンプルとかいろいろ入っていますが、必要なのは JavaScript(ibox.js) と CSS(ibox.css)、それから読み込み中の画像(images/indicator.gif) です。これらを適当な場所にアップしておき、使いたいページから読み込むようにしておきます。
<head> <style type="text/css" media="all"> @import "/path/to/ibox.css"; </style> <script type="text/javascript" src="/path/to/ibox.js"></script> </head>
そして、画像へリンクを貼る部分に、「rel="ibox"」という属性を追加します。
<a href="/path/to/画像ファイル" title="画像の見出し" rel="ibox"> <img src="/path/to/サムネイル" /> </a>
基本はこれだけです。a 要素に title 属性をつけておくと、これが画像の下に見出しとして表示されます。
Lightbox JS と違うのは、表示される画像が大きい場合はウィンドウのサイズにあわせて縮小されるところです(ウィンドウを小さくして試してみてください)。でも、これは好みが分かれるところかもしれませんね。スクリーンショットなんかは小さめに取らないと字が読めなくなるでしょうし。
iBox プラグインの使いかた
使いかたといっても、プラグインディレクトリにアップして有効にするだけです。このプラグインは iBox 本体を含んでいるので、本体を別途ダウンロードする必要がありません。
ではプラグイン自体は何をしてくれるのかというと、なんと有効にするだけで上記のことを勝手にやってくれます。head 要素内に ibox.js と ibox.css の読み込み文を追加して、さらに本文中にある画像へのリンクを、「rel="ibox"」付きに変換してくれるのです。
しかもそれがフィルタ処理になっているので、テンプレートや記事本文には何も手を加えることなく、過去記事の画像まですべて iBox 化されるというわけです。すばらしい。
でも逆にいうと、iBox を使わずに普通に表示したい場合はその方法を考えなくてはいけないわけですが‥それはそういう必要が出てきたら考えることにします。:P
また、このプラグインはいまのところ本体のバージョンアップには追随していないようです。本体の最新版が使いたい場合は別途ダウンロードして、差し替えてやる必要があります。
トラブルシュート
なんか簡単そうに書いてきましたが、実はけっこう苦労したんです。iBox 本体は最新版(現時点では iBox-1.2.1)を使おうと試みたせいなのですが、いちおう導入の際につまずいた点を書いておきます。
- オーバーレイ表示されない
プラグインはちゃんと動作してて、生成された HTML も正しいはずなのにオーバーレイ表示されない。そんなときは ibox.js が入っているディレクトリに実行権限がついてないかもしれません。なんとも初歩的ですが、だいぶ悩みました。('A`)
- プラグインを認識してくれない
プラグインの zip ファイルを解凍すると「ibox」という名前のディレクトリができます。しかしこれをプラグインディレクトリに置くだけでは、管理画面に表示されませんでした。
この中に入っているプラグインファイル(wordpress_ibox.php)をひとつ上のディレクトリ(プラグインディレクトリ直下)に移してみると、認識してくれました。そういうもんなの? - 読み込み中画像が表示されない
画像がポップアップされるまで、くるくる回る読み込み中画像が表示されるのですが、最初はこれが表示されませんでした。この画像へのパスを ibox.js の先頭で指定しているのですが、
var indicator_img_path = "/images/indicator.gif";
パスの頭についてるスラッシュが余計ですね。('A`)
ちなみにプラグインをそのまま使う場合は、このパスをプラグインファイルの中で指定するように変更されているので、だいじょうぶなようです。 - 画像が枠の中でずれて表示されてしまう
画像が枠の中で右に半分くらいずれてしまい、スクロールバーが表示されるという現象が起きました。デモ画像はちゃんと表示されるのに、自分でアップした画像はダメなんです。
これも悩みましたが、ibox.js の160行目あたり、(改行をいれてあります)var strHTML = "<img name="ibox_img" src=""+url+"" style="width:"+imgPreloader.width+"px;height:"+imgPreloader.height+"px; border:0;cursor:hand;margin:0;padding:0;position:absolute;"/>";
この行の
position:absolute;を削除したらうまくいきました。なぜそうなるのかまでは追いきれていませんが、いまのところ副作用はなさそうなので、よしとします。
ところで、画像だけでなく HTML文書のオーバーレイ表示ができるのも、iBox の特徴なのですが、これはまたいずれ試してみようと思います。ちょっといいネタが思いつかなくって。
Lightbox JS のほうもいつのまにかバージョン2が出てて、複数の画像を切り替えられる機能が追加になってるんですね。こっちもまた試してみようかな。いつになるかはわかりませんが。('A`)
こんにちは、歩行者です。
トラバありがとうございます。
iBox いいですね！
Opera9 でもきちんと動作しました。
WordPress はパワーユーザーが多そうなので、
プラグインもいろいろ揃っていそうですね。
うらやましい限りです。
Lightbox JS の記事も期待してます（＾＾）
いえいえ、ずっと放置状態にしてしまってすみません。
WordPress、楽しいです。ほかのは知らないけど、オススメです。
おかげで新マシンの環境構築がちっとも進みません。
記事にはしてませんが、HTML もオーバーレイ表示するという
iBox の機能を使って、「さかなへひと言」フォームを作ってみました。
よかったら見てみてください。
Lightbox2 は‥またおいおい (´ω`;)
イメージだけならLightBox2で問題なく使えたのですが、どうしてもHTMlを表示する必要が出てきたのでiBoxに乗り換えようとしてこちらを見つけました。
乗り換えるにあたって一つ出来なくなってしまうことがあって、もしご存知でしたら教えてください。
それは a 属性の title なんですが、Lightbox2だと が使えて何行でも入力できるのですがiBoxは入力できてもどうもイメージ横幅一行までしか枠に収まらず、後ははみ出てしまいます。これはどこかを直すことでLightbox2のように可変できるようなのでしょうか?
初めての書き込みなのに質問ですいません。宜しくお願いします。
タカフミさん、こんにちわ。
title の部分がはみ出てしまうのは、全体の枠(グレーのボックスね)に高さが指定されてるのが一番の原因だと思います。しかし iBox は Lightbox と違って、ウィンドウの大きさに合わせて表示しようとするので、ボックスの高さを指定するのは自然なことかなあと思います。
とはいえ、じゃあ高さの指定を外してみたらどうなるのか、やってみました。
まず ibox.css の32行目あたり、
#ibox_wrapperのheight:300px;を削除。ついでに
padding-bottom:30px;も削除したほうが、見栄えがよくなるかも。
それから、ibox.js の325行目あたりの
posToCenterという関数の最後(「}」の手前)に、elem.style.height = "";という行を追加します。あと、本文に書いてあるように、
position:absolute;を削除します。
これでとりあえずはみ出さないようにはなりました。ただ、表示位置の算出ははみ出る前のボックスの大きさに対して行われるため、若干上にずれます。で、スクロールさせたりすると真ん中に戻ったりします。そこまで何とかしようと思うと、たぶんもうちょっと手を入れないといけないでしょうね。。
あともう1点、title の途中で意図的に改行させるというのはできませんでしたね。数値文字参照で改行コードを入れてもダメでした。
ちょっと強引なやりかたでイマイチ感はありますが、ぼくにはこのへんが限界です。('A`)
お役に立ててればさいわいです。
わざわざ実験していただいて、本当にありがとうございました。
自己流でいじくっているので加工とかうまくできませんでして。
いままでイメージは解説を入れていたのでどうしても数行になってしまうんです。
本当はLightboxでHTMLも表示できればベストなんですけどね。
私でもなんとかなりそうなものを探してみます。
すでに自分でいじってるのであれば、あともうひとがんばりですよ！落ち着いて、オリジナルのコードと見比べてみてはどうでしょう。
「こういう風にしたい」というのがはっきりしているのであれば、いっそ自分で作ってしまうのもひとつの手かもしれないですね、なんて。
がんばってみてください。