PDFを自動展開するgDocsViewerをGeeklogで活用する方法
- Sunday, April 26 2015 @ 11:26 AM JST
- 投稿者: Admin
- 表示回数 4,166
リンク先の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