lightbox Like jQuery Plugin – ColorBox

SCREAMO CREATIVEの画像拡大表示方法として、ColorBoxというjQuery Pluginを用いています。LightBoxの綺麗な表示機能を基本に、多くの魅せ方を設定できるので、様々な用途に扱うことが可能。CSSでデザインをカスタマイズできるので、かなり遊び甲斐があるPluginです。

Lake

使い方は通常のjQuery Pluginに準拠しているので、同様のPluginをインストール慣れしている方でしたら数分で設置完了できるでしょう。

ColorBoxをサーバ内に設置する

下記サイトからColorBoxをダウンロードしてください。レフト・サイドバーの上部にダウンロードリンクがあります。

ColorBox – customizable lightbox plugin for jQuery
http://colorpowered.com/colorbox/

ダウンロード後、ファイルを解凍したデータを見てみると、「example1」〜「example5」のディレクトリが展開されているのが確認できると思います。各ディレクトリの中身はサンプルが入っていますので、HTMLファイルをブラウザで開き、どのような表示にしたいのか選んでください。なお、同様のプレビューはColorBox配布サイトでも確認できます。(ダウンロードリンク下のView Demonstration)

どのような表示にさせたいのか決定したら、そのプレビューHTMLと同ディレクトリのCSSファイルをサーバにアップロードしましょう。また、解凍後の一階層目のディレクトリのcolorboxディレクトリ内の「jquery.colorbox-min.js」も、同様にサーバにアップロードしてください。サーバ内に「colorbox」などと新規にディレクトリを作成して、まとめて同封しておくとわかりやすいでしょう。

ColorBoxはjQuery Pluginなので、jQueryが読み込まれていないと動作しません。jQueryを導入していない場合は、以下のサイトよりjQueryをダウンロードしてサーバにアップロードしてください。

jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/

ここまでで、サーバにアップロードしたファイルは、下記のようになっていると思います。

  • jQuery Library
  • jquery.colorbox-min.js
  • example同封のCSSファイル

各ファイルを読み込む設定をheadに記載します。

<!--[if IE]>
	<link type="text/css" media="screen" rel="stylesheet" href="/js/colorbox/colorbox-ie.css" mce_href="/js/colorbox/colorbox-ie.css" title="example" />
<![endif]-->
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/colorbox/jquery.colorbox.js" type="text/javascript"></script>

の記述は、exampleによりある場合と無い場合がありますので、ユニークに対応してください。またサーバ内のディレクトリ構成は、公開ディレクトリ直下に「js」というディレクトリを作成し、そこに集約させています。お使いのサーバ構成にあわせて、こちらもユニークに対応してください。

画像をColorBoxエフェクトを用いて表示させる

次に、ColorBox同封の選択したexampleのディレクトリ内のHTMLをエディタ等で開き、下記コードから始まるJavaScriptコードを探してください。

<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements

探し出したら、該当するコードので閉じられる部分までをコピーして、画像を掲載するページの、先ほどJavaScriptを読み込み記載した次行あたりにペーストします。

さあ、ColorBoxが使えるようにするまでもう少しです。ColorBoxは基本的に、サムネイル画像をクリックした際に、大きな画像が表示される部分にエフェクトをかけます。つまり下記の状態のコードがまず必要です。

<a href="image.jpg" title="画像"><img src="image_small.jpg" alt="画像" /></a>

ColorBoxのエフェクトをかける、かけないはrelタグで判断しています。プレビューHTMLを見ていただければわかるかと思いますが、「rel=”example1″」という記載があります。ここでhead内のソースコードに目を移してみましょう。先ほどペースとした、

<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements

に再度目を移してください。

$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});

ペースとしたプレビューHTMLファイルのソースコードにより細部は異なりますが、上記のような記載があるはずです。たとえば、$(“a[rel=’example1′]”).colorbox();の部分は、
「aタグのrelタグにexample1という記載があれば、colorbox functionを呼び出せ」
$(“a[rel=’example2′]”).colorbox({transition:”fade”});の部分は、
「aタグのrelタグにexample2という記載があれば、keyにtransition、valueにfadeを設定し、colorbox関数を呼び出せ」
と命令しています。

それぞれのkeyやvalueは、プレビューHTMLファイルをテストしていけば大体は把握できると思いますが、手っ取り早いのが表示させたいエフェクトのrelタグをコピーして利用することです。つまりrel=’example1’のように画像を表示させたい場合は、以下にように記載してください。

<a href="image.jpg" rel="example1" title="画像"><img src="image_small.jpg" alt="画像" /></a>

以上で説明は終了させていただきますが、最後に一言。エフェクトを多用させると、Webサイトの統合性が崩れてしまいます。できればエフェクトは1個に統一、多くても2パターンということろでしょうか。サイト構成により変動はしますが、それぐらいがベターだと思います。

サイトにあったJavaScriptを

ColorBoxのような、LightBoxライクなライブラリ、Pluginは多く存在しています。当サイトはjQueryを使用していることもあり、多機能を求めるためColorBoxを導入することにしましたが、すでに導入されているJavaScriptライブラリや、求める機能に応じて他のライブラリ、Pluginを選択するのも手でしょう

related story