Lightbox系ライブラリのまとめ

Lightboxをかなり前にこのサイト導入していますがその際に若干不具合があった(ようにみえた)ので、自分なりに修正し、その内容を公開していました。

• ebi’s diary(2006-01-05) - Ligthbox JSを組み込んでみたけど、ちょっとおかしいのでちょっといじる。

LightBoxはかなり人気があるようで、それからかなり時間がたちますが、いまだにその日の日記にアクセスが結構あります。まだ需要があるようだし、その後新しいものや亜種がいくつか出ているらしいので再度見直してみました。

調べだすと自分が今までまったく知らなかったものもたくさんあって驚きました。全部をまとめて紹介しているページは見つけられなかったので、誰かの役に立つかもと思い、まとめて紹介してみます。

おそらく見つけられなかった同種のものがほかにもあると思いますので、知っている方はコメントで教えてもらえるとうれしいです!

Lightbox

• Lightbox JS

初代のLightbox。今まで使っていたのはこれでした。同一ページ内に画像を表示するというコンセプトはこれが一番初めにはじめたようです(おそらく)。このコンセプトを元にいろいろな亜種が生まれています。

本家のバージョン2も出ていますが、それでもこちらの初代のほうが好きだというユーザーも存在しているようです。

プラグイン

WordPress用プラグイン

• WP lightbox JS WordPress plugin

関連記事

• 小粋空間: Lightbox JS で画像を表示する
• lightbox.js-WordPressプラグイン版 « BirDesign

Lightbox 2

• Lightbox 2

Lightboxのバージョンアップ版。動きにアニメーションが加わり、Image Setとして複数の画像をまとめてスライドショーのように表示できる機能が追加されています。

プラグイン

WordPress用プラグイン。

• Lightbox 2.0 for WordPress

関連記事

• 【ハウツー】ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を (1) Lightbox 2.0とは？ - パソコン - マイコミジャーナル
• Lightbox v2.0 WordPressプラグイン版 « BirDesign

Lightbox Plus

• Lightbox Plus

初代Lightboxを独自に拡張したもの。以下の機能が追加されているそうです。

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

関連記事

• sb開発研究所 - Lightbox plus

Litebox

• Litebox - Same great taste, fewer calories

Lightbox2を元にmoo.fxを用いてサイズを軽くしたものだそうです。サイズはなんと3kb程度とのこと。結構人気があるようですね。

プラグイン

tdiary用プラグイン。

• Liteboxプラグイン - Scrapcode@はてなダイアリー

関連記事

• 小粋空間: Litebox 1.0 をブログに適用する
• ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場 - GIGAZINE

iBox

• iBegin Blog / iBox (powered by evoBlog)

作者がLightboxに足りないと思う機能を付け足したもの。以下の特徴があるそうです。

• 11kb程度のサイズ。
• 画像だけでなく、inline divs, 外部HTMLの表示が可能
• JavaScriptを有効にしていないユーザーもサポート
• prototypeやmoo.fx、scriptacluousなどに干渉しない

関連記事

• 【ハウツー】ゼロからはじめるiBox - 軽量ライブラリで画像やHTMLを表示する (1) ゼロからはじめるiBox - 軽量・簡易ライブラリで - パソコン - マイコミジャーナル
• オーバーレイ効果を作り出す軽量スクリプト「iBox」 - GIGAZINE

GrayBox

• Orangoo Labs - GreyBox

画面上でスライドショーを作成できるもの。 以下のような特徴があるそうです。

• ポップアップ禁止ソフトに影響されない。
• 22kbしかない(より小さいものはほかに多数ありますが)
• セットアップが簡単
• 使うのが簡単
• CSSをつかって簡単にスタイルをコントロールできる
• prototype.jsなどのライブラリを必要としないので、ライブラリが使えない環境にも組み込める。

関連記事

• 【ハウツー】ゼロからはじめるGreyBox - 一歩先行くウィンドウ表示 (1) GreyBoxとは? - パソコン - マイコミジャーナル
• MOONGIFT: » Webサイトを手軽にクールに「GreyBox」:オープンソースを毎日紹介

ThickBox

• ThickBox 3.1

jQueryライブラリを用いたもの。以下のような特徴があるそうです。

• 15kb程度のサイズ
• ブラウザサイズよりも大きい画像はリサイズする
• 画像だけでなく、iframeのコンテンツ、インラインのコンテンツ、AJAXコンテンツも対象
• ブラウザのスクロール、サイズ変更などがあっても、常にブラウザの中央に表示される
• 透過画像を自分で追加できる
• リンクやボタンやイメージマップなどからも呼び出せる

ほかのものに比べると重い代わりに多機能な印象です。

関連記事

• 【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 (1) ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 - パソコン - マイコミジャーナル
• 画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
• ThickBox3をつかってみる (KUMA TYPE)

Slimbox

• Slimbox, the ultimate lightweight Lightbox clone · digitalia.be

Lightbox2と内容、見た目はまったく同じですが、mootoolsというライブラリを使用することでMITライセンスとなりlightboxよりも気軽に使えるという点がメリットだそうです。以下の特徴があるそうです。

• ページが表示されたときにはもうSlimboxの準備が出来上がっているため立ち上がりが早い
• 矢印キーとESCキーを使って操作できる
• 背景の画像をクリックすることで終了できる
• Lightboxよりも安定しており、連続クリックなどをしても正常に動く
• 正常にアニメーションが動かない特定のブラウザではアニメーションを表示しない

本家のLightboxと比較した場合の違いは以下のようなものがあるそうです。

• イメージのリンクをクリックしたとき以外にも、Javascriptから起動できる
• ライブラリが変更になったことでコードが書き直され、7kbと軽量になっている。ライブラリと合計しても26kb。
• CSSがシンプルで正しいものになっている
• 背景用の1pxのgifが必要ない

関連記事

• Slimbox - mootoolsベースのLightboxライブラリ。 - buena suerte!
• m・fami:slimboxを使ってみたい

ここまで沢山あると、どれを使っていいのか迷ってしまいます。リンクをたどってDemoを見て回るだけでも面白いです。

私はサイズの軽さからLiteboxを採用しようかなと考え中です。