jQuery外部ライブラリ「Colorbox」

投稿日時：
カテゴリ：VBA・Javascript・PHP・その他プログラミング全般

不定期掲載「jQuery外部ライブラリ紹介」
第一回目は画像ファイルをポップアップ表示する「Colorbox」を紹介します。

まずはどんなものか見てみましょう。
サンプルはコチラです。
色々なサイトで使用されている外部ライブラリなので、よく見た事があるのではないでしょうか。

Colorboxの使用例を紹介します。

1、Colorboxのサイト、青い太文字の「Download」から「colorbox-master.zip」をダウンロードして解凍します。
2、解凍されたフォルダ内の「jquery.colorbox.js」または「jquery.colorbox-min.js」をWebページに組み込んで使用します。
3、テーマごとに「example1」から「example5」まであり、気に入ったテーマの「colorbox.css」と「images」を使用します。cssは組み込んで、imagesフォルダはcssと同じフォルダ内に配置して下さい。
4、Webページの中に「$(セレクタ).colorbox」で適用します。プロパティの設定は色々ありますが、今回のサンプルではグループ化を指定する「rel」のみを使用しています。

以下のサンプルソースコードを参考にしてください。

	<head>
		<meta charset='utf-8'/>
		<title>Colorboxのサンプル</title>
		
		<!-- 「colorbox.css」「jquery.js」「jquery.colorbox.js」を組み込む -->
		<link rel="stylesheet" href="./colorbox.css" />
		<script src="./jquery.js"></script>
		<script src="./jquery.colorbox-min.js"></script>
		
		<script>
			$(function(){
				
				//group1にcolorboxを適用する
				$(".group1").colorbox({rel:"group1"});	//group1でひとつに括る
			});
		</script>
		
	</head>
	<body>
		<p>
			<a class="group1" href="./files/file1.jpg" title="ネコの画像その1">ネコ1</a><br/>
			<a class="group1" href="./files/file2.jpg" title="ネコの画像その2">ネコ2</a><br/>
			<a class="group1" href="./files/file3.jpg" title="ネコの画像その3">ネコ3</a><br/>
			<a class="group1" href="./files/file4.jpg" title="ネコの画像その4">ネコ4</a><br/>
			<a class="group1" href="./files/file5.jpg" title="ネコの画像その5">ネコ5</a><br/>
		</p>
	</body>

ColorboxはJSONや複雑な設定を使用していないので、比較的簡単に使用できる外部ライブラリです。

（担当：奥田　英太郎）