最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。
ライトボックスクローンの比較表が作成される程、その数は日に増しているので、クオリティの高いの数個使いこなし、是非次のプロジェクトに合わせて、一つ取り入れたいものだ。

そこで、今回は、FANCYBOXというすばらしいライトボックスクローンの設置方法を紹介しよう。

1. 必要なファイルをダウンロード

なにはともあれ、必要なファイルをダウンロードしましょう。
うれしいことに、FancyBoxをダウンロードしますと、必要なファイルがすべて入ってます。早速FancyBoxのウェブサイトに行って、右側のダウンロードリンクを押してください。
FancyBox
http://fancybox.net

2. 必要なファイルをページにリンクさせる

自分はファイルの配置を以下のようにしましたが、自分のウェブサイト合わせた配置でかまいません。
Screen shot 2010 11 09 at 10.49.45 PM 577x402 ライトボックスで写真ギャラリーを表示させる

私と同じファイルの配置であれば、index.phpは以下の様にしてください。ファイルの配置を変えた場合は、自分のフィアルの配置に合わせて、リンクのパス(道)は変更してください。

<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Fancy Box Demo by D3M Studio</title>

	<!-- Jquery のファイルとFancyboxのファイルは必須です!!  -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.3.pack.js"></script>

	<!-- 華麗な動きが欲しい場合は以下のファイルが必要ですが、そう出なければ、消してください。 -->
	<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

	<!-- マウスのスロールウィールでアルバムなどの画像を変更したいのであれば、以下のファイルが必要です -->
	<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

	<!-- Fancyboxのスタイルファイルも必須です -->
	<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.3.css" media="screen" />
	<script type="text/javascript">
	</script>

</head>
<body>

</body>
</html>
3.一個のイメージだけをライトボックスで表示

最初に画像ファイルへのリンクを作り、a tag に class 若しくは id を指定する。

<div>
	<a class="fancy_single" href="images/t3_00.jpg">
		<img src="images/t3_00_s.jpg" alt="ライトボックスシングル画像" />
	</a>
</div>

そして、以下の様にしてその a tag を fancybox で表示する様に指定するコードをhead内に入れる。

<script type="text/javascript">
		$(document).ready(function() {
			/*シングルイメージ 用のライトボックス 稼働 コード。すべてデフォルトのオプッション*/
			$("a.fancy_single_no_option").fancybox();
		});
</script>

もっと写真のでかたなどをコントロールしたい場合は、オプションを指定してください。

/*シングルイメージ 用のライトボックス 稼働 コード に オプッションを入れてみました*/
$("a.fancy_single_with_option").fancybox({
						'transitionIn'	:	'elastic',
						'transitionOut'	:	'elastic',
						'speedIn'		:	600,
						'speedOut'		:	200,
						'overlayShow'	:	false
			});	
4.アルバムのイメージをライトボックスで表示

アルバムなど複数のイメージを表示させる場合でも、やり方はさっき程と同じです。唯一違うのは、a tag の中に rel=”" 内にアルバム名を指定するだけです。 複数のアルバムがある場合でも、アルバム名を変えるだけになります。

/*グループイメージ 用のライトボックス 稼働 コード。 基本的は、a tag の中に rel="同じ名前" でグループとして認証します*/
$("a.fancy_group").fancybox({
			'transitionIn'	:	'elastic',
			'transitionOut'	:	'elastic',
			'speedIn'		:	600,
			'speedOut'		:	200
});
<div>
	<a rel="group1" class="fancy_group" href="images/t3_02.jpg">
		<img src="images/t3_02_s.jpg" alt="ライトボック グループ 1" />
	</a>
	<a rel="group1" class="fancy_group" href="images/t3_03.jpg">
		<img src="images/t3_03_s.jpg" alt="ライトボック グループ 1" />
	</a>
	<a rel="group1" class="fancy_group" href="images/t3_04.jpg">
		<img src="images/t3_04_s.jpg" alt="ライトボック グループ 1" />
	</a>
</div>

もし、アルバムのサムネイルを一個しか表示しない場合は、以下のようにしてください。

<div>
	<a rel="group2" class="fancy_group" href="images/t3_08.jpg">
		<img src="images/t3_00_s.jpg" alt="ライトボック グループ 2" />
	</a>
	<a rel="group2" class="fancy_group" href="images/t3_06.jpg"></a>
	<a rel="group2" class="fancy_group" href="images/t3_07.jpg"></a>
</div>
5.インラインコンテンツをライトボックスで表示

インラインコンテンツとは、同じフィアル内にあるコンテンツのことです。同じファイル内にコンテンツを作り、divなどの中にいれて、display:none を指定して、ページが表示されても見えないようにします。fancybox でリンク先をそのdivに指定しますと、fancyboxが勝手にdisplayを変更し、ライトボックスの中に表示してくれます。

$("a.fancy_inline").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'elastic',
	'speedIn'		:	600,
	'speedOut'		:	200
});
<p>
	インラインコンテンツをライトボックスで表示させています。
	以下のリンクをクリックすることにより、あなたは私たちの<a class="fancy_inline" href="#kangae">考え</a>に賛成したことになります。
	<a href="http://d3mstudio.com">新しい時代への準備</a>

</p>

<div style="display:none;">
	<div id="kangae">
		Give a man a fish; you have fed him for today. <br />
		あなたは、ある人に魚を差し上げた。それで、その人は一日は食べられる。<br />
		Teach a man to fish; you have fed him for a lifetime. <br />
		あなたは、ある人に魚のつり方を教えた。それで、その人は一生食べて生きていくことができる。
	</div>
</div>

これは、とっても簡単にできるにも関わらず、いろいろな所で使えるので便利です。User Experienceの向上に欠かせないものです。たとえば、ちょっとした規約などの表示を別のページに飛ばすのではなく、ライトボックス内に表示。他にも、用語の意味を表示したり、ビデオを表示したりできます。

6.ajaxコンテンツ をライトボックスで表示させる

Ajaxでコンテンツを表示させるのも、リンクの先を別のページに変えるだけで、基本的にはさっき程のインラインと変わりありません。

<p>
	以下のリンクをクリックすることにより、あなたは私たちの<a class="fancy_inline" href="ajax.php">考え</a>に賛成したことになります。
	<a href="http://d3mstudio.com">新しい時代への準備</a>
</p>
7.iFrameで別のサイトコンテンツ をライトボックスで表示させる

iframeなどは、よく別サイトを自分サイト内に表示させる場合などに使います。iframeの場合は、リンク先URLのあとに?iframeを入れるだけです。 http://example.com?iframe

是非、あなたの今のサイトに導入してみてください。