skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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パターンから選択できます。
下のサンプルでは、矢印が視覚的に見やすい位置にあり一番ユーザビリティに優れていると思われるものです。

jQueryベースで綺麗なLightBox風JavaScript「ColorBox」サンプル

記事作成：2009年03月10日

前の記事：デザインに優れた画像スライドショーJavaScript「JQUERY SLIDESHOW PLUGIN」
次の記事：要素を回転表示させるJavaScript「jQuery Carousel」