Lightbox系オーバーレイ表示をしてくれるThickboxを導入、の巻　出所：ブランドって何だぁ？

いやぁ～、これでプリント広告やら屋外広告やら、今までよりはブラウザのロード時間の犠牲なくとも、より鮮明にクリエイティブを見て頂くことができるようになりました。下の写真は今年の秋に行って来た那覇祭りの一場面なのですが、写真をクリックしてもらえば効果が分かります。

上の写真は単体表示。下の写真はアルバム表示（オーバーレイ画像の左下に前後移動の矢印あり）

Lightbox（ライトボックス）なるものはどっかで読んで以前から知ってはいたのですが、なかなかチャレンジする時間が取れず、この年末まで押してしまいました。で、いざ、導入しようと決心し、色々と情報や導入手法を探してブラウズしていたら出てくるわ、出てくるわ、Lightboxのクローンやら進化版やら。これについては後半で。

結局様々な試行錯誤の挙句、弊サイトではThickboxで落ち着くことにしました。LightboxとGreybox（後述）の間ぐらいの存在で、作者曰く、AJAXではなくAJAH を使っているのが特徴的なのだとか。

作者のブログはこちらのThickbox - One box to rule them all ＝「シックボックス－一つのボックスが全てを凌駕する」（意訳）。そしてデモと説明、ダウンロードはこちらのThickbox 2.1 となります。

今回も、このローテクおやじは色んな人から色んなご協力、アドバイス、そして勉強をさせていただいたのですが、Thickbox導入に当たっては、Liz（リズ）様のLyrical Cutie（リリカルキューティー）のLightbox JSからThickboxへ乗り換えを参照し、分からないところをとても親切にアドバイス・フォローアップしていただきました。Liz様に感謝！んで、今は導入手法が最新バージョンにアップデートされています（Thickbox 2.1を導入する）。

Lightbox JSから始まった様々な"BOX"

一番最初に参照したサイトがこちらのLightbox JS v2.0 。けれども導入方法として大変参考にもなり、なおかつ、やはりアドバイスをいただいたのが、MAKOTO3様のココログでLightbox JS v2.0を利用する方法。MAKOTO3様に多謝！

また、LightboxからLiteboxへ浮気し、更にSlimboxにも挑戦。このときは、cie様のSlimbox - mootoolsベースのlighboxライブラリでやはり大変有難いアドバイスをいただきました。cie様、ありがとうございました！

ちなみに、ご存じない方もいるかもしれませんが、ココログは小生が使っているTypepadがベースになっているので大変参考になるのです。けれども、若干違っているところもあったりして。でもなぜか、こういったJavascriptとかCSSとかのカスタマイズ関連情報ってココログ関係だと検索でいっぱい引っかかってくるのにTypepadではほとんど情報が無いんですよね。これはTypepad.jpに限らずTypepad.comでも同じなんです。検索の仕方が甘いのかなぁ。

そして、こんなサイト（Lightbox Alternatives＝「Lightbox代替品」）やこんなサイト（Which Lightbox is right for you?＝「どのLightboxがあなたに適していますか？」）を見つけちゃったりするともう頭の中がごちゃごちゃ。Boxだらけやんけ！

ということもあり、小生のようなローテクな方が無駄な時間をあまり掛けずに済むかもしれないことを願って、以下、リンク集みたいなものを書いておきます（本当は自分の為なんですけどね）。

Lightbox

Lightbox JS v2.0 （ダウンロード＆デモ＆解説のサイト）
ココログでLightbox JS 2.0を利用する方法
Lightbox JS v2.0を使ってみる（Livedoor Wiki編）

Lite Box

Litebox （ダウンロード＆デモ＆解説のサイト）
Litebox 1.0をブログに適用する（Movable Typeの導入方法）
画像をかっこよく見せてみよう！Part 2 （Litebox 1.0）（Broach編）

Slimbox

Slimbox, The ultimate lightweight Lightbox clone （ダウンロード＆デモ＆解説）
Slimbox - mootoolsベースのLightboxライブラリ。（Livedoor編）

LITBox

LITBox （ダウンロード＆デモ＆解説）
LITBoxの使い方サンプル
Ajax - LITBox （Ｌｉｇｈｔｂｏx風ダイアログ表示ライブラリ）の一歩先行く使い方

Greybox

greybox （ダウンロード＆デモ＆解説）
Greybox Redux （ダウンロード＆デモ＆解説）

Thickbox

Thickbox 2.1 （ダウンロード＆デモ＆解説）
Thickbox 2.1を導入する
ドリコムWANTEDにThickboxを使ってみた（Ruby on Rails編）

iBox

iBox （ダウンロード＆デモ＆解説）
iBox いれてみました（WordPress編）

Highslide JS

Highslide JS （ダウンロード＆デモ＆解説）
Movable Typeで画像をページ内でPopUp - Highslide JS
Highslide JS導入（Movable Type編）
Highslide JS （Movable Type編）

最後に、小生がThickboxを選んだ理由なのですが、①比較的容量が軽い ②ブラウザの大きさに合わせて自動的にリサイズしてくれる ③だって、できちゃったんだもん。
以上、長文御免！

【追記】　2007年１月８日

画像をオーバーレイ表示してくれるThickboxがAjax全文検索エンジンを設置後、機能しなくなってしまいました。prototype.jsがjQuery.jsに干渉してしまっているのだろうか。一難去ってまた一難。さて、どうしよう．．．。

【追記】　2007年１月２１日

結局このサイトでは、Lightbox系オーバーレイ表示はHighslide JSで決定しました。

↑ 上のスライドバーでこのエントリーの評価をお願いします！評価ランキングはこちら。

タグ: Ajax, Greybox, Highslide, iBox, JavaScript, JS, Lightbox, LITBox, Litebox, Slimbox, Thickbox, Typepad, タイプパッド

→ 過去のコメント集はこちら

さて、リンクしてくださって感謝しております。ところが、どうやらリンク切れの模様です。お忙しいとは存じますが、出来ましたら、修正下さると混乱が無くなるかと存じます。

投稿情報: アバクロンビー&フィッチ | 2011年4 月 6日 (水) 18:41

Ujiki.oO様
なるほど。貴重な情報、ありがとうございます。
今週末にちょっと遊んでみますね！

投稿情報: yoichi | 2007年1 月17日 (水) 10:26

再度お邪魔します。自動縮小機能付きの「Lightbox Plus」ってご存知ですか？WikiにはLightbox JS v2.0で十分なのですが、ブログにはもっと画像ファイル処理に良いモノをと探していました。このHPを手掛かりに、色んなサンプルを見ましたが、最終的にはLightbox Plusにしました。是非、本ページでも紹介してください。目下、Seesaa、FC2、Livedoorの各FREEブログに実装済みです。実装手順はWikiで解説中です。

- Ujiki.oO -

投稿情報: Ujiki.oO | 2007年1 月17日 (水) 10:19

Ujiki.oO様
ご連絡ありがとうございます。リンク切れ、修正しておきました。申し訳なかったです。
また、貴サイトでの弊サイトのご紹介までいただき、併せてお礼申し上げます！

投稿情報: yoichi | 2007年1 月10日 (水) 20:11

はじめまして。Ujiki.oOと言います。
「Lightbox JS v2.0を使ってみる」で、Livedoor Wiki への実装手順を公開しているものです。
さて、リンクしてくださって感謝しております。ところが、どうやらリンク切れの模様です。お忙しいとは存じますが、出来ましたら、修正下さると混乱が無くなるかと存じます。

投稿情報: Ujiki.oO | 2007年1 月10日 (水) 10:09