Lightbox風メディアビュアー”Fancybox”でPDFを表示する

マルチメディアギャラリーの中でLightboxのようなビュアーを組み込もうと思ったところ、PDFをどうしたものかなと。

PDFやSWF、youtubeなどに対応出来るLightboxライクなJavascriptとして、”Dumpbox“や”Fancybox“があります。

Dumpboxは、スタンドアロンなスクリプトで外部のライブラリを必要としないのですが、逆にJqueryに干渉することもあるっぽい…ようです?
後、個人的に見た目が派手すぎて気に食わなかったり(笑)

そんな理由で、今回はJqueryベースの”Fancybox“(v2.1.4)を使わせて頂く事にしました。

【設置方法】

解凍したら出てくる、”source”フォルダをfancybox等にリネームして、サーバーの適当な場所(この例ではjsフォルダの下)に置き、HTMLのheadタグ内で

<link rel="stylesheet" href="/js/fancybox/jquery.fancybox.css" type="text/css"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/fancybox/jquery.fancybox.js" type="text/javascript"></script>

のように読み込ませます。

【基本的な使い方】

<a href=”hogehoge.jpg” class=”fancybox”>リンク用テキストorイメージ</a>

のようなタグをHTMLに書き置いて

<script type="text/javascript">
  $(document).ready(function($){
    $('a.fancybox').fancybox();
  });
</script>

でOKというお手軽仕様です。
後はブラウザ上でリンクを押すといい感じに表示してくれます。

【PDFを読ませる】
基本の例では、画像系ファイルしかビュアーが起動しません。
PDFに対応させるには一工夫要ります。
PDFなファイルの場合は別のCSSクラスを振って動作を分けるのが公式のサンプルにあるのですが……PG出力時に判定を書くのがめんどくさい(笑
ので、JS側で自動的にどうにかさせます。
いっそのこと、メディアファイルっぽいものはクラスを振らないでも全部ビュアーで見せることにします。

↓こんな感じ

<script type="text/javascript">
  $(document).ready(function($){
    $('a[href$=".jpg"] , a[href$=".gif"] , a[href$=".png"], .fancybox').fancybox();
    $('a[href$=".pdf"]').fancybox({
      autoSize: true,
      type:'iframe',
      iframe: {
        preload: false
      }
    });
  });
</script>

肝は    iframe: { preload: false } の記述です。
これが無いと、IEでPDFの読込が終わってくれたことを検知しないのか、何時までも読込画面のままになりました。

この例ではPDFの読込部分をiframeで記述してますがembedタグ(plugin読込)を使って書くことも出来ます。
↓こんな感じ

$('a[href$=".pdf"]').click( function(){
  $.fancybox({
    type: 'html',
    content: '<embed type="application/pdf" src="'+
      this.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 ) + '" />' +
      '<noembed>Can not load PDF</noembed>' ,
    beforeClose: function() {
      $(".fancybox-inner").unwrap();
    }
  });
  return false;
});

長いですね(^^;

iframeとembedどっちがいいかですが……
embedタグを使って書く場合、pluginがインストールされてない場合にインストール画面が表示されてしまったり、または真っ白な枠だけ出たりとよろしくないです。
iframeの場合、ブラウザ内で表示できる設定では無いときはPDFのダウンロード画面になります。

という理由で、私はiframeでの表示を採用しました。

私の作成したメディアギャラリープログラムにはPDFのサムネイル生成機能を付けてるので、サムネイルを並べた中からJPGでもPDFでも意識せずに閲覧できるギャラリーが作れました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>