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>