6件のコメント

Lightbox系ライブラリのまとめ

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

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

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

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

Lightbox

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

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

プラグイン

WordPress用プラグイン

関連記事

Lightbox 2

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

プラグイン

WordPress用プラグイン。

関連記事

Lightbox Plus

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

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

Litebox

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

プラグイン

tdiary用プラグイン。

関連記事

iBox

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

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

GrayBox

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

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

ThickBox

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

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

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

関連記事

Slimbox

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

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

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

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

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

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

6件のコメント

  1. すみません、トラックバックをもらって前半のまとめ記事は見ていたのですが、導入記事がある事に気がついていませんでした!
    「you must add onload=”initLightbox()” into your body tag」も「すべての画像へのAリンクにref=”lightbox”と付け加えています。」も、プラグインの32行目以降、add_footer_procが出力するJavaScriptで処理されるはずなのですが、記事を読むと、このJavaScriptが出力されていなかったために正しく動作しなかったように思います。
    add_footer_procはtDiary1.5.2から追加されたプラグイン用の命令なのですが、この記事を書かれた当時のtDiaryのバージョンはいくつだったかわかりますか?

  2. はしもとさん。
    コメントありがとうございます。正確にバージョンは覚えていないのですが、Debianのtestingを使っており、この日記を書いた時には1.5.2以上であったことは間違いないです。
    実はその後、ほかのプラグインでもadd_footer_procがうまく動作しない現象が出ていて、ちょっとだけ調べていました。その結果、どうやらほかのプラグインと干渉してしまっているような感じです。プラグインとして1つだけ選択するときちんと動作するのでそう判断しました。
    さらに、現在Wikiモードを使っているのですが、これともなにやら依存関係があるらしく、Wikiモードをまだつかっていなかった頃に書いた日記ではうまく動いたりもしていました。
    ここまでしか調べてなかったりします・・・。コメントいただきありがとうございました。
    (そのうち原因を追求、特定できるといいのですが・・・)

  3. ボクは最初からWikiモードで使っているのですが、Wikiモードと他のモードとの混合だと何かあるのかな(^_^;?
    このプラグインは出力結果のHTMLに対してJavaScriptで処理をしているからモードは関係ないはずなのですが、んー、何ででしょうねえ…。
    導入記事を見て、ようやく自分のところで設置例とサンプルを書く気力が湧いて用意しました。作りっぱなしで放置はダメですね、ありがとうございました。
    何か原因がわかりましたら、ぜひご連絡ください。

  4. その後、プラグインを有効にすると、IEではサイトが開けないという現象も出たりしました。原因はまだ不明・・・。

  5. litebox.rbが動かなかった理由と新たな問題(原因は間違いなく私) このサイトとliteboxの不幸せな関係 以前litebox.rbを導入しようとしたけれどもうまくいかないという事を書きました。 ebi’s diary – Lightbox系ライブラリのまとめ – Lightbox系ライブラリのまとめ , Litebox..

  6. litebox.rbがIEでうまく動かなかった原因を教えてもらっちゃいました!

    ebi’s diary – Lightbox系ライブラリのまとめ – Lightbox系ライブラリのまとめ , Liteboxプラグイン導入 ebi’s diary – tdiaryへのWindows Live Writerでの投稿テスト , tdiaryへのWindows Live Writerでの画像投稿テスト , 課題。 , 叱ってもらえる.. ebi’s diary – litebox…

コメントを残す

メールアドレスが公開されることはありません。