Lightbox Plus で画像を同一画面にオーバーレイして表示

前からやろうやろうと思っていたことなのですが、サムネイルをクリックしたときに別画面を起ち上げて元画像を表示するのではなくて、同一画面上にレイヤー重ねて表示したいと思ってました。世の中には便利 Javascript が公開されていまして、メジャーどころで言えば、Lightbox JS ってやつがそうです。

使い方を丁寧に説明してあるサイトで有名どころは、「小粋空間: Lightbox JS で画像を表示する」あたりでしょうか。僕的には Lightbox を更に拡張した Lightbox Plus を入れることにしました。

- スポンサーリンク -

作者のサイトに寄りますと、Lightbox Plus の拡張点としては、

  • ウィンドウサイズよりも大きな画像を表示した際に、画像の拡大ができます。
  • 表示画像のサイズと表示位置がリアルタイムでウィンドウサイズに追従します。
  • 効果画像を貼付けることができます。

とのこと。大きい画像が画面内に入りきらないときの処理が追加されている点が欲しかったです。

ただ、Lightbox を使うためには、

<a href="sample.JPG" rel="lightbox"><img alt="sample.JPG" src="sample-thumb.JPG" /></a>

のように、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 を書いています。

<a href="http://www.drk7.jp/MT/drk/images/20060317/DSCN6147.JPG" target="_blank"><img alt="DSCN6147.JPG" src="http://www.drk7.jp/MT/drk/images/20060317/DSCN6147-thumb.JPG" width="300" height="225" border="0" /></a>

特に rel 指定がなくても、Lightbox が機能して、拡大表示されます。target 属性もちゃんと無視されて同一画面になります。

DSCN6147.JPG

- スポンサーリンク -