拡大画像のポップアップ表示

Lokesh Dhakarが無償配布しているLightbox概要 Example

拡大画像をポップアップ表示するスクリプトのひとつに Lightbox がある。2006年から使っているが、三つのバージョンが混在するようになった。

2006年版はひとつの画像を表示する機能だけで、popup.jsで代替できる。popup.jsには画像表示だけでなく、HTMLファイルの表示やパラグラフのトグル表示などの機能がある。

2008年から写真サイトやブログで使ってきたv2.04では、複数の画像を表示できるが、popup.jsとの併用ができない。prototype.jsの競合があるからだろう。lightbox.js, prototype.sに加えて、scriptaculous.js, effect.js, builder.jsも必要なので面倒だ。

v2.51では、jquery-1.7.2.min.jsを採用している。配布のlightbox.cssのデザインが変わっただけで機能は同じである。HTMLファイルの表示もできるように改造したスクリプトが第三者から配布されている。

※2011年からは、動画のポップアップ表示もできるMediaboxAdvanced.jsを使うようになった。
※滑らかにスクロールする機能を持ったスクリプトを含む /script/lightbox/2.51.js を作成した。

Examples

Single image

Image set

Plants: image 1 0f 4 thumb
Plants: image 2 0f 4 thumb
Plants: image 3 0f 4 thumb
Plants: image 4 0f 4 thumb