4つのバリエーションに変えれるLightbox風のスクリプト ColorBox

「ColorBox」はLightboxの様に画像を拡大表示するjQueryのPluginです。
拡大表示できるのは画像の以外にも、WebページやHTML、AJAX表示やインラインコンテンツにも対応しています。
一番凄い所はデザインのバリエーションは4パターン準備されおり、自分のサイトにあったテイストに合わせられるって所ですかね。
今回は「ColorBox」の簡単な使い方を解説したいと思います。

ColorBoxの使い方
ColorBox - customizable lightbox plugin for jQueryのDownloadから一式ダウンロード出来ます。
共通で使うJS CSS
<link type="text/css" media="screen" rel="stylesheet" href="/style/colorbox.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="/js/jquery.colorbox.js"></script>

<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom.css" title="example" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom-ie.css" title="example" />
<![endif]-->
<script type="text/javascript">
document.write("<style type='text/css'>#inline-content{display:none;}<\/style>");//hides the inline content if javascript is supported.
$(document).ready(function(){
$(".cpModal").colorbox();
$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});
$("#flash").colorbox({contentAjax:"../content/flash.html"});
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
});
</script>

<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom-ie.css" title="example" />
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
$.fn.colorbox.settings.transition = "fade";
$.fn.colorbox.settings.bgOpacity = "0.9";
$.fn.colorbox.settings.contentCurrent = "image {current} of {total}";
$(".cpModal").colorbox();
$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});
$("#flash").colorbox({contentAjax:"../content/flash.html"});
$("#google").colorbox({contentWidth:"900px", contentHeight:"600px", contentIframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
});
</script>

<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom-ie.css" title="example" />
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});
$("#flash").colorbox({contentAjax:"../content/flash.html"});
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
});
</script>

<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom-ie.css" />
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
$.fn.colorbox.settings.transition = "fade";
$.fn.colorbox.settings.bgOpacity = "0.8";
$.fn.colorbox.settings.contentCurrent = "({current}/{total})";
$(".cpModal").colorbox();
$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});
$("#flash").colorbox({contentAjax:"../content/flash.html"});
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
});
</script>
ColorBoxの使う際の注意点や気をつける事
各デモページ使われているcolorbox-custom.css、colorbox-custom-ie.css、imageフォルダは同一階層に入れるか、imageフォルダを別の階層にアップしたいならCSSに記述されている画像のパスを任意のパス変更して下さい。
※自分の方で検証してみた所、コンテンツの高さが高くなった場合IE6でガタツキが出ていました。もしからたらIE6には完璧には対応出来ていないのかもしれません。
はじめましていつも勉強させてもらっています。
質問を投稿させていただきます。
グループ表示(スライドショー)ではなく単体で表示しようと考えています。
そこで、画像をクリックすれば閉じるようにしたいのです。かなりいじったり検索したりしたのですがわからないのでご教授お願いします。
2010年06月19日 16:27