lightbox系プラグインでは有名なFancyBoxです。今まで使用したことがなかったのですが、バージョン３になったので使ってみました。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリックしてください。

2.ダウンロード

公式ページに行って、ダウンロードしてください。 ダウンロード完了し解凍すると「fancybox-master」フォルダーができます。

3.必要なファイル

「fancybox-master」の中にある「dist」フォルダーにある以下の２つのファイルを自分のフォルダーにコピーします。私の場合はプラグイン本体は「js」フォルダー、プラグインのCSSは「css」フォルダーを作成してそれぞれにコピーしています。
jquery.fancybox.min.js
jquery.fancybox.min.css

4.HTMLの編集

headタグ内で、jquery.fancybox.min.cssとjquery.jsを読み込みます。jquery本体のバージョンはお手持ちのバージョンを使用してください。


<link href="./css/jquery.fancybox.min.css" rel="stylesheet" />
<script src="./js/jquery-1.11.3.min.js" ></script>

</head>

bodyタグ内で、画像を追加していきます。 <a>内に「data-fancybox」を書いて、画像のタイトルを表示する場合は、「data-caption="タイトル名"」を書きます。

シングル表示の場合


<a href="./images/s001.jpg" data-fancybox data-caption="sample1"><img src="./images/thumbs/thumb01.jpg" alt="" /></a>
<a href="./images/s002.jpg" data-fancybox data-caption="sample2"><img src="./images/thumbs/thumb02.jpg" alt="" /></a>

グループ表示の場合

data-fancybox="任意の文字列"でグループ化できます。 


<a href="./images/s001.jpg" data-fancybox="group" data-caption="sample1"><img src="./images/thumbs/thumb01.jpg" alt="" /></a>
<a href="./images/s002.jpg" data-fancybox="group" data-caption="sample2"><img src="./images/thumbs/thumb02.jpg" alt="" /></a>
<a href="./images/s003.jpg" data-fancybox="group" data-caption="sample3"><img src="./images/thumbs/thumb03.jpg" alt="" /></a>

グループ表示で使用する場合は、画面上部にコントローラーが表示され、スライドショーの実行やサムネイル表示ができます。

bodyタグの最後の方でプラグインを読み込み、プラグインの初期化をします。


<script src="./js/jquery.fancybox.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
	$('[data-fancybox]').fancybox();
});
</script>
</body>

5.最後に

fancyBox3は、個人や非営利のサイトで使用する場合は無料で使用できますが、商用利用ですと有料になりますので、ご注意ください。