Lightboxに似たJavaScriptライブラリのfancyboxをこのウエブページに導入してみた。
（別サイトでfancybox version 1.3.4を使っていたが、html表示時に実行される初期化関数の設定値が全く変わってしまっているので、最初から設定しなおさないといけない）
■ 必要なファイルの展開
公式サイトから version 2.0.5 をダウンロードして… （コピーしたもの ： fancybox version 2.0.5）
・jquery-1.7.1.min.js
・jquery.mousewheel-3.0.6.pack.js
・jquery.fancybox.pack.js
・jquery.fancybox.css
・fancybox_sprite.png
・fancybox_loading.gif
・blank.gif
のファイルを適当なディレクトリを作ってそこにコピーする。（すでに jQuery 1.7.1 をインストール済みの場合は、それを使えば良い。ファイルはjQuery公式配布版と、fancybox同梱版は同一）
htmlのhead部分に、jQueryとfancyboxをロードする記述を入れる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<!-- image popup -lightbox- jQuery module -->
<script type="text/javascript" src="/cgi-bin/fancybox-2.0.5/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/cgi-bin/fancybox-2.0.5/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/cgi-bin/fancybox-2.0.5/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/cgi-bin/fancybox-2.0.5/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="/cgi-bin/fancybox-2.0.5/fancyboxOnload.js"></script>
<title>ページのタイトル</title>
</head>
<body>
■ 初期設定ファイル（JavaScript）の作成
fancyboxのスクリプトなどを入れるためにつくった先ほどののディレクトリに、初期設定ファイルを作成する。
今回は、「閉じるボタンの表示」「左右の画像送り矢印の表示」「画像のループ無効」「画像チェンジエフェクトはフェード」を設定している。
jQuery(document).ready(function($){
$('a[href$=".jpg"], a.fancybox').fancybox({
arrows : true,
closeBtn : true,
loop : false,
openEffect : 'fade',
closeEffect : 'fade',
nextEffect : 'fade',
prevEffect : 'fade',
helpers : {
title : { type : 'outside' },
buttons : {}
}
});
})
■ 記事に画像ファイルを挿入する
<a rel="lightbox_group" title="キャプション文字列（fancyboxで表示）" href="photo.jpg" target="_blank"><img src="photo-thumb.jpg" width="213" height="320" alt=" " title="キャプション文字列" /></a>
a link タグ内のrel属性で画像送りに対応し、title属性がfancyboxで画像表示時にキャプションとして表示される。
■ 表示例
このように表示される。
