FancyBox

FancyBoxとは、lightbox系のjQueryプラグインです。

画像のほか、WebページやFlashビデオを開くこともできます。

設定すればPDFも表示できます。PDFの表示方法はこちら

Demo

画像をクリックすると大きな画像を表示します。←画像をクリックすると大きな画像を表示します。

名称
FancyBox
動作環境
InternetExplorer 6 / 7 / 8
Firefox 4.0
GoogleChrome 10.0.648.204
Opera 10
Safari 4
特徴
動作にはjQueryが必要です。
ライセンス
MIT and GPL licenses

設置方法

  1. Fancyboxからファイルをダウンロードします。
    fancybox Site Image
  2. ダウンロードしたファイルを解凍します。
    • [root]
      • [example]
      • [fancybox]
      • ajax.txt
      • index.html
      • jquery-1.4.3.min.js
      • style.css
    [fancybox]jquery-1.4.3.min.js[js]フォルダにコピーします。
  3. Fancyboxを実行するためのスクリプトファイルrun.js[js]フォルダに作成します。
    run,jsの中身
    
    jQuery(function($){
    $('a[href$=".jpg"] , a[href$=".gif"] , a[href$=".png"]').fancybox();
    //画像ファイルはfancyboxで開く
    });
    赤字は、a要素のhref属性の値が「.jpg」「.gif」「.png」で終わる場合、という意味です。
  4. javascriptやCSSを読み込むように、index.htmのhead要素内に以下の記述を追加します。
    <!-- fancybox ここから -->
    <link type="text/css" rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <script type="text/javascript" src="js/jquery.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="js/run.js"></script>
    <!-- fancybox ここまで -->
  5. 以上でリンク先が画像(jpg,gif,png)の場合にFancyBoxで開くようになります。

多少の設定が必要ですがFancyBoxでPDFファイルを開くこともできます。

PDFを表示するには、ブラウザにPDFを表示するプラグインがインストールされていれている必要があります。

Demo

Test PDF←リンクをクリックするとPDFファイルを開きます。

設定方法

  1. 上記項目で作成したrun.jsを開きます
  2. run.jsに以下の赤字部分を追加します
    jQuery(function($){
    $('a[href$=".jpg"] , a[href$=".gif"] , a[href$=".png"]').fancybox();
    $('a[href$=".pdf"]').fancybox({
    'type': 'html',
    'onStart': function(selectedArray, selectedIndex, selectedOpts) {
    selectedOpts.content =
    '<embed type="application/pdf" src="'+
    selectedArray[selectedIndex].href +
    '#nameddest=self&amp;page=1&amp;view=fitH&amp;toolbar=1"
    type="application/pdf"
    height="' + Math.round( $(window).height() * 0.8 ) + '"
    width="' + Math.round( $(window).width() * 0.8 ) + '" />';
    }
    });

    });
  3. 保存するとページ中のPDFへのリンクを、Fancyboxで開きます。

動作確認環境

Windows XP

Mac OS X

注意事項

IE6では読み込みが極端に遅くなるようです。

PDFプラグインがインストールされていない場合には、真っ白なモーダルウィンドウが表示されます。

Mac版 Opera では、そもそもブラウザ上でPDFが表示されないため動作しませんでした。

ページトップに戻る