lightbox系 jQueryプラグイン「colorbox」

2011.05.07 カテゴリ: javascript

cbox-title1
lightbox系のjavascriptライブラリは数多くありますが、いくつか試したろころjQueryのプラグイン「colorbox」が使い易かったので備忘録も兼ねて紹介します。

「colorbox」の使い方

今回のサンプルまずはcolorbox公式サイトよりダウンロードして解凍します。解凍すると下のようなフォルダが出来上がります。（※バージョン1.3.16の場合）

colorboxフォルダからjquery.colorbox-min.jsまたはjquery.colorbox.jsを取り出します。jquery.colorbox-min.jsはコードが読みにくい変わりに容量が軽いです。 example1~5フォルダは用意されているスキンサンプルです。利用したいスキンのフォルダから colorbox.cssファイルとimagesフォルダを取り出します。 htmlのhead内でcolorboxのjavascriptファイルとCSS、を読み込むコードを記述します。

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

つづいてcolorboxの設定をjavascriptで記述します。ここではaタグのrel要素をgroup1,group2としたものにcolorboxを設定しています。rel要素で同じ名前を指定したものがグループ化されます。

<script>
$(document).ready(function(){
$("a[rel='group1']").colorbox({
transition: "elastic",
speed: 450,
opacity: 0.7
});
$("a[rel='group2']").colorbox({
transition: "fade",
width: "600px",
height: "420px",
iframe: true
});
});
</script>

colorboxでは様々なオプションが設定できます。今回の例では transitionやopacityなど少しだけ設定していますが、公式サイトのInstructionsに一覧があるので実際に設置する際には確認しておくとよいと思います。

スキンのカスタマイズ

いくつかlightbox系ライブラリを試したなかでcolorboxを選んだポイントはスキンのカスタマイズがし易かったことです。colorboxではcolorbox.cssを編集することで自由にデザインを変更することができます。例えば#cboxOverlayはオーバーレイ表示の背景の色指定です。

#cboxOverlay{background:#fff;}
#colorbox{}
#cboxContent{margin-top:32px; overflow:visible;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{background:#000; padding:1px;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxLoadingOverlay{background:#000;}
#cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px;
position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}
#cboxPrevious{background-position:0px 0px; right:44px;}
#cboxPrevious.hover{background-position:0px -25px;}
#cboxNext{background-position:-25px 0px; right:22px;}
#cboxNext.hover{background-position:-25px -25px;}
#cboxClose{background-position:-50px 0px; right:0;}
#cboxClose.hover{background-position:-50px -25px;}
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}

注意するポイント以前に仕事で使用した際に引っかかったポイントを２点ほどメモとして残しておきます。

transitionの指定を変更してもポップアップした画面を閉じる際のエフェクトは変わらない。 colorboxのオプションを指定する時にtransition, speedなどでエフェクトの調節ができますが、これらを変更しても画面を閉じる時は必ずフェードアウトになるようです。フェードのスピードなどを調整したい場合は、ソースファイル jquery.colorbox.jsの785行目以降に $overlay.fadeTo(200, 0); $box.stop().fadeTo(300, 0,などを変更すれば大丈夫です。（※バージョン1.3.16の場合）
```
publicMethod.close = function () {
if (open && !closing) {

closing = true;

open = false;

trigger(event_cleanup, settings.onCleanup);

$window.unbind('.' + prefix + ' .' + event_ie6);

$overlay.fadeTo(200, 0);

$box.stop().fadeTo(300, 0, function () {

$box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();

trigger(event_purge);

$loaded.remove();

setTimeout(function () {
closing = false;
trigger(event_closed, settings.onClosed);
}, 1);
});
}
};
```
iframeオプションをtrueにすると同じグループの次の画面、前の画面へ移動できない今回のサンプルでもgoogleやyahooをiframeで表示していますが、iframeオプションがtrueのためか次のページに遷移することができません。こちらは解決できなかったのでiframeを使わないことで対応しました。バージョンアップで解決してほしいところです。

以上、気になる点もありますが非常に便利なライブラリなので興味のある方は是非使ってみてください。