jQueryベースで綺麗なLightBox風JavaScript「ColorBox」

巷に溢れかえるLightBox風ギャラリー。
ColorBoxもそんなJavaScriptの一つですが、colorと名乗るだけあり、綺麗な感じです。

sponsors

使用方法

ColorBoxからファイル一式をダウロードします。
<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
<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" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
	$("#id名").colorbox();
});
</script>

あとは上記で指定したid名を指定すれば完成です。
<a id="id名" href="画像パス" rel="複数画像の場合" title="キャプション">リンク</a>

※複数画像の場合は、relの中に共通のものを記述します。
例)lightboxなど
また、画像以外にもAjax HTML、Inline HTML、Flash / Video、Iframed Contentなど幅広く対応しています。
また、デザインは4パターンから選択できます。
下のサンプルでは、矢印が視覚的に見やすい位置にあり一番ユーザビリティに優れていると思われるものです。

サンプル

画像1 画像2 画像3
iframe

sponsors

Javascriptサンプルページ一覧
skuare.net