ColorBox(拡張・進化型 Lightbox jQuery plugin)

画像表示エフェクトの元祖 Lightbox を拡張・進化させたjQueryプラグインとして
有名なColorBoxについてのメモ。

正直今更感もあるが、IE6できちんと機能するという点でもありがたく、しかも軽量で、優れたjQueryプラグインだということを改めて実感する。

このデザクロ-ホームページ内に設置してある「簡単ご質問フォーム」も
ColorBoxを使って作成している。

ちなみにその時のColorBoxとjQueryのバージョンは次の通り。

  ColorBox v1.3.15  jQuery 1.4.2 ( jQuery 1.3+ )

今回のブログ投稿時点のColorBoxとjQueryのバージョンは次のようになっている。

  ColorBox v1.3.17.2  jQuery 1.6.1 ( jQuery 1.3+ )

この間のバージョンアップの主な変更は、Internet Explorerのpng画像(アルファチェチャンネルをもつpng画像)の表示に関するもので、スタイルシート(colorbox.css)内の記述が、IE6、IE7・IE8、IE9用に細分化されている。

このお陰もあってか、IE6におけるColorBoxの挙動や表示が以前よりもスムーズになっている気がする。(とても好感のもてるバージョンアップと言えます。)

 

今回、敢えてColorBoxを取り上げているのは、ColorBoxの便利な機能のひとつを取り上げるためです。

jQueryプラグインを使っての画像表示では、表示される際の画像の幅に気を使う。
画像編集の技術やアプリをもたない、いわゆる画像初心者の方が投稿するようなCMSを構築する際はなおさらだ。

そんな時重宝するのが、このColorBox。
(下記ホームページにデモやダウンロードリンクがあります。)

ColorBox – customizable lightbox plugin for jQuery

 

設定オプション(maxWidth、maxHeight)で、オーバーレイ表示する画像や画像枠の最大幅や最大高をきめ細かく設定することができます。もちろん元の画像が小さければ、小さいまま、縦横比率も変わることはありません。

【ColorBoxの主な画像表示の変更パターン】

  1. ブラウザーの天地左右のサイズに合わた画像表示サイズの自動変更。
    (この場合、画像と画像枠も画像サイズに合わせて変動する。)
  2. ブラウザーの天地左右のサイズに合わた画像枠の表示サイズの自動変更(固定)と固定した枠内での画像サイズ自動変更。
    (この場合、画像枠のサイズが固定され、画像サイズがその中で調整され表示される。)

 

ただ、本家のホームページでは表示デモが5×18パターンも掲載されているにもかかわらず、今回紹介したパターンの掲載が無かったり、もともと英語サイトということもあってか、日本語で紹介・解説しているホームページでもあまり取り上げられていない機能のようです。
(画像表示幅を制限するjQueryとしては、Lightbox Plusなどもありますが、画像表示幅が常に100%、ブラウザーによってはスクロールバーが表示されてしまったり、表示されるまでの挙動がスマートとは言ないため、使うにはためらいます。等倍表示機能などは素晴らしいんですけどね。)

 

【ホームページ画面と説明】
オーバーレイ表示の画像サイズを自動変更できるjQueryプラグインcolorboxのホームページ画像

 

エラー・バグ情報 メモ1

 

ColorBoxをカスタマイズし、連続した inline 表示の設定にした際、
下記のように縦横のサイズを%で指定すると、Internet Explorer(IE6とIE8で確認済み)で、「オブジェクトは、このプロパティまたはメソッドをサポートしていません。」とホームページを表示する毎にエラーを指摘される。

$("#inline").colorbox({inline:true, width:"80%", height:"80%" });

縦横サイズの指定に px を使うとエラーが表示されなくなる。

 

エラー・バグ情報 メモ2

 

メモ1と同じように、ColorBoxをカスタマイズし、連続した inline 表示の設定にすると、連続表示の初期設定がなぜか自動的に loop になり、loop:false の設定記述を追加すると、いわゆる「次(Next)」と「前(Previous)」のボタン機能に不具合を発生するケースがある。

 

Tags: , ,