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

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

使用方法
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」サンプル

sponsors

「jQueryベースで綺麗なLightBox風JavaScript「ColorBox」」をシェアする

記事作成:
記事URL:

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