colorbox - lightbox風画像をオーバレイで表示するシンプルなjQueryプラグイン

2010/10/13 23:45 Update

colorboxは画像やスライドショー、Ajax、インライン＆iframeコンテンツをlightbox風オーバレイで表示するjQueryプラグインです。

動作環境

◇　言語：JavaScript（jQuery）
◇　ブラウザー：Firefox 3+, Safari 3+, Opera 9+, Chrome, Internet Explorer 6, 7, 8（テスト済み）
◇　ライセンス：MIT

イメージ：

機能・特徴

◇　画像やグルーピング、スライドショー、ajax、インライン＆iframeコンテンツをサポート
◇　軽量：圧縮（.min.js）版はわずか9KB
◇　CSSによるデザイン
◇　オプション設定
◇　callbacks & event-hooks
◇　画像のプレロード.
◇　使い方簡単

使い方例

１）<head>～</head>に次のようなコードを定義

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>

２）JavaScriptコード例

<script type="text/javascript">
    $(document).ready(function(){
        $(".colorbox a").colorbox();
    });
</script>

３）HTMLコード例

<div class="colorbox">
        <a href="../content/ohoopee1.jpg" rel="example1">画像１</a>
        <a href="../content/ohoopee2.jpg" rel="example1"><img src="../content/ohoopee2.jpg" /></a>
</div>