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

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>

デモ 1

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

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

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

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

匿名

匿名

はじめましていつも勉強させてもらっています。
質問を投稿させていただきます。

グループ表示(スライドショー)ではなく単体で表示しようと考えています。

そこで、画像をクリックすれば閉じるようにしたいのです。かなりいじったり検索したりしたのですがわからないのでご教授お願いします。

2010年06月19日 16:27

匿名

匿名

デモ2を使用して画像を表示すると左いっぱいに寄りスクロールバーがつきます。どこを直せばいいのでしょうか?
よろしくお願いします。

2010年04月24日 12:56

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article