ライトボックス - Colorbox

ダイアログのデザインをした CSS と jQueryライブラリと Colorboxのプラグインを読み込む。ダイアログのデザインは好みに応じて CSSファイルを調整する。

<link rel="stylesheet"          type="text/css" href="css/colorbox.css" media="screen" />
<script type="text/javascript"  src="js/jquery.js"></script>
<script type="text/javascript"  src="js/jquery.colorbox.js"></script>

アンカータグに CSSクラスを指定し そのクラスに対して プラグインを有効にする。
lightbox クラスに対して Colorbox の機能をいくつかの条件（オプション）を指定して有効にする。

<script type="text/javascript">
$(document).ready(function() {
    $(".lightbox").colorbox();
    $(".iframe").colorbox({iframe:true, width:"50%", height:"50%"});
    $(".group").colorbox({rel:'group', transition:"fade", slideshow:true});
});
</script>

アンカータグに lightboxクラスを指定する。アンカーの title に指定した内容がポップアップタイトルになり、href で指定した内容がポップアップします。同じクラス名で指定するとグルーピングすることができます。

<a class="lightbox" title="Sweets" href="image/photo/p1_500.jpg"><img src="image/photo/p1_150.jpg" /></a>
<a class="iframe" title="HTML"   href="lightbox_sample.html"><img src="image/photo/p6_150.jpg" /></a>
<a class="group" title="Mont Saint Michel Abbey" href="image/photo/p2_500.jpg"><img src="image/photo/p2_150.jpg" /></a>
<a class="group" title="New York" href="image/photo/p3_500.jpg"><img src="image/photo/p3_150.jpg" /></a>
<a class="group" title="Candy" href="image/photo/p4_500.jpg"><img src="image/photo/p4_150.jpg" /></a>
<a class="group" title="Golden Gate Bridge" href="image/photo/p5_500.jpg"><img src="image/photo/p5_150.jpg" /></a>