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

Category ：
Javascript

「ColorBox」はLightboxの様に画像を拡大表示するjQueryのPluginです。

拡大表示できるのは画像の以外にも、WebページやHTML、AJAX表示やインラインコンテンツにも対応しています。
一番凄い所はデザインのバリエーションは４パターン準備されおり、自分のサイトにあったテイストに合わせられるって所ですかね。

今回は「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>

デモ 1

<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>

デモ 2

<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>

デモ 3

<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>

デモ 4

<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には完璧には対応出来ていないのかもしれません。

Comments

匿名: ColorBoxを使い、1枚の画像に3枚の画像（グループ）をスライドショーで表示したい時、残り2枚はページには表示しない。
上記のような事は可能でしょうか？宜しくお願い致します。

2010年10月09日 14:07

わたなべ: レクチャー、いつも大変勉強になります。
ありがとうございます。
このColorBoxも大変すばらしいのですが、クリッカブルマップでも使えるようになるのでしょうか？
以前、Lightboxでもレクチャーがありましたが、もしおわかりになりましたら、よろしくお願いいたします。
お手数をお掛けいたします。

2010年08月04日 17:37