PDFを自動展開するgDocsViewerをGeeklogで活用する方法

Geeklog
投稿者: 表示回数2,265

リンク先のPDFファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewer(ライセンスMIT)をGeeklogで活用する方法を紹介します。

gdocsviewerをダウンロードして/vendor/gdocsviewer/以下にアップロードします。

footer.thtmlに追加:

<!-- PDF { -->
<script type="text/javascript" src="{site_url}/vendor/gdocsviewer/jquery.gdocsviewer.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
  $('a.embed-large').gdocsViewer({width: 900, height: 600});
  $('a.embed-medium').gdocsViewer({width: 500, height: 500});
  $('a.embed-small').gdocsViewer({width: 300, height: 240});
  $('#embedURL').gdocsViewer();
});
/*]]>*/
</script>
<!-- } PDF -->

コンテンツ表示部に自動タグを追加:

[pdf:PDFファイル名]

自動タグプラグインで、自動タグpdfを追加する:

自動タグ:pdf を追加。置換文字列には以下のコードを記述してください。


<div class="uk-margin-top uk-visible-large">
<a class="embed-large" href="#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-medium">
<a class="embed-medium" href="#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-small">
<a class="embed-small" href="#1" target="_blank" style="cursor:default; color: #444"></a> </div>

ダウンロード

/blog/archives/394-Google-Docs-Viewer-plugin-for-jQuery.html

事例

http://www.rentpro.co.jp/databox/data.php/0029/code