Lightbox Plus で画像を同一画面にオーバーレイして表示
前からやろうやろうと思っていたことなのですが、サムネイルをクリックしたときに別画面を起ち上げて元画像を表示するのではなくて、同一画面上にレイヤー重ねて表示したいと思ってました。世の中には便利 Javascript が公開されていまして、メジャーどころで言えば、Lightbox JS ってやつがそうです。
使い方を丁寧に説明してあるサイトで有名どころは、「小粋空間: Lightbox JS で画像を表示する」あたりでしょうか。僕的には Lightbox を更に拡張した Lightbox Plus を入れることにしました。
作者のサイトに寄りますと、Lightbox Plus の拡張点としては、
- ウィンドウサイズよりも大きな画像を表示した際に、画像の拡大ができます。
- 表示画像のサイズと表示位置がリアルタイムでウィンドウサイズに追従します。
- 効果画像を貼付けることができます。
とのこと。大きい画像が画面内に入りきらないときの処理が追加されている点が欲しかったです。
ただ、Lightbox を使うためには、
のように、rel 属性を付与してあげる必要があります。既にブログを構築済みの場合、全てのエントリーを書き直すのは現実的にあり得ない選択肢。とは言え、新しいエントリーだけ対応するってのもなんだかなぁ〜。
で、Lightbox Plus を更に Hack 。ようは、アンカータグ（a href=ってやつのこと）の href 属性が画像であれば、lightbox が機能すればいいんだよね。少なくとも僕の場合は。ってことで、
/*
if (!anchor.getAttribute("href")
|| anchor.getAttribute("rel") != "lightbox") continue;
*/
// アンカータグで画像へのリンクの場合、lightbox が機能するように変更
if (!anchor.getAttribute("href")) continue;
if (!anchor.getAttribute("href").match(/.+(jpg|gif|png)$/i)) continue;
こんな感じにソースを書き直せば、rel 属性をつけなくても勝手に画像へのリンクだけが Lightbox が機能するようになります。改変ソースが欲しい方は、こちらを右クリックで保存してください。
例えば、別画面で元画像を表示するサンプルはこんな感じ。今までも下記のような html を書いています。
特に rel 指定がなくても、Lightbox が機能して、拡大表示されます。target 属性もちゃんと無視されて同一画面になります。
コメントやシェアをお願いします！
雅之（新潟市）
大変わかりやすいHPですばらしいですね！
ひとつ教えていただきたいのですがlightboxで画像を拡大したときに拡大画像のトップマージンをゼロにするにはどのようにしたらよいのでしょうか？拡大画像を一番上に持っていきたいのですが。
新潟市近郊の写真集を作っているのですが一部 lightbox を使用したいのですが大きい画像だと下に隠れてしまうためです。
よろしくお願いいたします。
sharp
はじめまして。
ちょっと気付いたのですが日本語のファイル名だとFirefoxでは大丈夫ですがIEだとローディングの
ままで読み込めない…ようです。
mamiko
そうですね、細かいことを考えてたらきりがないですもんね。
closeボタン、少し位置がずれても目立たないようにデザインと表示位置を変えようかとも思いましたが、drkさんがおっしゃるように画像をクリックすれば閉じるので、思い切って取ってしまいました。
文字数が多い時に機能しないことがあるのは気付きませんでした。
動作が鈍い時はちらほらあるのですが。。。
知識不足でお役に立てなくて申し訳ないです。
drk
mamikoさん＞そうですね。FireFox だとおかしくなります。ただ、あまり細かいことは気にせずに使えばいいか・・・と深追いをしていません。よく考えたら、クリックすれば画像は閉じるので、closeボタンは表示しなくても良いかもしれませんね。
と、もう一つ気になっている点があるのですが、文字数が多いページの場合、JSの読み込むタイミング等で、Lightbox が機能しないときもありますよね。こっちは何とかしたいなぁ〜と思ったりしていますが、うまい解決方法ありますでしょうか？
mamiko
はじめまして。
改変ソースをいただきました。
Lightbox Plus導入以前の画像にも対応できる上に、これからrel="lightbox"を記述しなくて済むので、とても助かりました。
ありがとうございました。
それと、お聞きしたいことがあるのですが･･･。
Lightbox Plusで大きめの画像を表示した時に、close.gifの表示される位置がほんの少し左に寄ってしまい枠との間に隙間が出来てないでしょうか？（ウィンドウより大きい画像を拡大した時はずれていません）
改変ソースに直接関係ないことなので不適切かと思いましたが、こちらのサイトも同じような状態でしたので質問させていただきました。
※※本家のものをそのまま使っていた時も同じ状態でしたので、こちらの改変ソースに問題があるという意味では全くありません※※