最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。
ライトボックスクローンの比較表が作成される程、その数は日に増しているので、クオリティの高いの数個使いこなし、是非次のプロジェクトに合わせて、一つ取り入れたいものだ。
そこで、今回は、FANCYBOXというすばらしいライトボックスクローンの設置方法を紹介しよう。
1. 必要なファイルをダウンロード
なにはともあれ、必要なファイルをダウンロードしましょう。
うれしいことに、FancyBoxをダウンロードしますと、必要なファイルがすべて入ってます。早速FancyBoxのウェブサイトに行って、右側のダウンロードリンクを押してください。
FancyBox
http://fancybox.net
2. 必要なファイルをページにリンクさせる
自分はファイルの配置を以下のようにしましたが、自分のウェブサイト合わせた配置でかまいません。
私と同じファイルの配置であれば、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>
３．一個のイメージだけをライトボックスで表示
最初に画像ファイルへのリンクを作り、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
});
４．アルバムのイメージをライトボックスで表示
アルバムなど複数のイメージを表示させる場合でも、やり方はさっき程と同じです。唯一違うのは、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="ライトボック グループ １" /> </a> <a rel="group1" class="fancy_group" href="images/t3_03.jpg"> <img src="images/t3_03_s.jpg" alt="ライトボック グループ １" /> </a> <a rel="group1" class="fancy_group" href="images/t3_04.jpg"> <img src="images/t3_04_s.jpg" alt="ライトボック グループ １" /> </a> </div>
もし、アルバムのサムネイルを一個しか表示しない場合は、以下のようにしてください。
<div> <a rel="group2" class="fancy_group" href="images/t3_08.jpg"> <img src="images/t3_00_s.jpg" alt="ライトボック グループ ２" /> </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>
５．インラインコンテンツをライトボックスで表示
インラインコンテンツとは、同じフィアル内にあるコンテンツのことです。同じファイル内にコンテンツを作り、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の向上に欠かせないものです。たとえば、ちょっとした規約などの表示を別のページに飛ばすのではなく、ライトボックス内に表示。他にも、用語の意味を表示したり、ビデオを表示したりできます。
６．ajaxコンテンツ をライトボックスで表示させる
Ajaxでコンテンツを表示させるのも、リンクの先を別のページに変えるだけで、基本的にはさっき程のインラインと変わりありません。
<p> 以下のリンクをクリックすることにより、あなたは私たちの<a class="fancy_inline" href="ajax.php">考え</a>に賛成したことになります。 <a href="http://d3mstudio.com">新しい時代への準備</a> </p>
７．iFrameで別のサイトコンテンツ をライトボックスで表示させる
iframeなどは、よく別サイトを自分サイト内に表示させる場合などに使います。iframeの場合は、リンク先URLのあとに?iframeを入れるだけです。 http://example.com?iframe
是非、あなたの今のサイトに導入してみてください。
