ebi's webpageまず嫁から始めよ。後の世間は簡単だ。

＿ 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を採用しようかなと考え中です。

Tags: web css plugin | Bookmark:

＿ Liteboxプラグイン導入

比較検討の結果、Liteboxを組み込むことにしました。

導入方法

まず、プラグインを以下からいただきました。

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

ダウンロードし、tdiary/misc/pluginに配置しました。

その後、tdiaryの管理画面からプラグインを有効にします。

すると、以下のタグがヘッダに挿入されるようになります。

<link rel="stylesheet" href="./litebox/css/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="./litebox/js/prototype.lite.js"></script>
<script type="text/javascript" src="./litebox/js/moo.fx.js"></script>
<script type="text/javascript" src="./litebox/js/litebox.js"></script>

このままでも問題なければこのままで。相対パスを変更したければtdiary.confにオプションを記入すればよいようです。記入できるオプション名と記入の仕方はプラグインの先頭に書いてくれています。

#   Options
#     @options['litebox.url'] = string
#       example:
#         @options['litebox.url'] = '/litebox/'
#
#     @options['litebox.resizeSpeed'] = integer
#       controls the speed of the image resizing (1=slowest and 10=fastest)
#
#     @options['litebox.borderSize']  = integer
#       if you adjust the padding in the CSS, you will need to update this variable

私の場合はHikiとtdiaryで共有する関係上@options['litebox.url']に絶対URLを指定しました。

@options['litebox.url'] = 'http://ebi.dyndns.biz/litebox/'

あとは、litebox本体を配置します。以下の場所からダウンロード。

• Litebox - Same great taste, fewer calories

配置する場所はヘッダで指定されている場所と一致するように配置します。この際に注意点が1つあります。

「ダウンロードしてきたライブラリ内のファイル名はlitebox-1.0.jsですが、プラグインが指定しているのはlitebox.js」です。

なので、ファイルをコピーするなり、シンボリックリンクを張るなり、名前を変えるなりして対応してください。

あとは「you must add onload="initLightbox()" into your body tag」ということですので、これを実現する必要があるのですが、どこでいじればいいのかよくわからず困りました。とりあえず、/tdiary/skel/header.rhtmlをいじってしまえば目的は達成できます。これが正しい方法なのかどうかはよくわかりません。

<body onload="initLightbox()">

でもこれで準備は完了。さて試してみよう・・・ということでimage_ex.rbをつかって画像をアップロード。ちなみにこのプラグインもすべての画像へのAリンクにref="lightbox"と付け加えています。

動作確認

そうしてできたのが以下の画像。クリックすればうまく動きます。と、言いたいところなのですが、うまく動きません(涙)

クリックすると一応動作はするのですが肝心の画像が表示されませんし、背景が半透明になるはずの動きもしません。正確には上のほうの少しだけしか対象になりません。これはまた私のサイトの構造やCSSが悪いのでしょうか・・・。

また修正対応が必要になりそうです。lightbox v1に引き続き今回もです・・・。(涙

今日はもう遅くなったので、また明日やります。年内に終わるといいなぁ。。。

追記

ずっとFirefoxで確認していたのですが、「もしかしたらIEならうまく表示されてるかも！」と思って確認してみたら、IE7でもIE6でもサイト自体正常に表示されなくなっちゃってました。ショック。

仕方が無いので、いったんプラグインを無効にしました。何でだろう・・・。

さらに追記

プラグインを無効にした上で手動でヘッダに記述をしてみたらあらかたうまく動いちゃいました。ただ、右下の閉じるボタンが表示されていませんが。プラグインの不具合かな?

loading.gifとcloselabel.gifに関しては相対パスで必ず./images/以下を見に行ってしまうような感じの動きに見えます。とりあえずとりにいきたがる場所に画像ファイルを置いてあげればうまく動きました。

これで一応動いたんだけど、なんだかちょっと腑に落ちない点が多々あるので、明日追加で確認しよう。

Tags: web plugin tdiary | Bookmark: