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

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

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

<script type="text/javascript">
$(document).ready(function() {
    $(".lightbox").fancybox({
        "zoomOpacity":  true,
		"overlayShow":  false,
		"zoomSpeedIn":  200,
		"zoomSpeedOut": 150,
		"hideOnContentClick": false
    });
});
</script>

アンカータグに lightboxクラスを指定する。アンカーの title に指定した内容がポップアップタイトルになり、href で指定した内容がポップアップします。relで同じ名称で指定するとグルーピングすることができ、画面の左右にカーソルを持って行きページ送りすることができます。

<a class="lightbox" title="Sweets" href="image/photo/p1_500.jpg"><img src="image/photo/p1_150.jpg" /></a>

Single Page

Image group