3D FlipBookで、アニメーション付きでPDFを見開き表示

以前PDF Embedderを紹介しましたが、1ページづつしか表示されませんでした。書類などは向いていますが、カタログなど見開きで見せるものは不向きでした。今回は、PDFプラグイン3D FlipBookで、アニメーション付きでPDFを見開き表示する方法を紹介します。

今回のDEMOは、チョコレートカタログのPDFです。

アイコンをクリックすると、ライトボックスでPDFが表示されます。アニメーションでページ遷移します。

dFlip Settings

まず、プラグインをインストール有効化します。左サイドメニューのdFlip Books＞Add New Bookをクリックします。設定画面が表示されるので、下のdFlip Settingsから、PDF設定をして行きます。

Source

タイトルを入力します。PDF FileのSelect PDFボタンをクリックします。メディアファイルからPDFファイルを選択し、Send to dFlipボタンをクリックします。

次にサムネイル画像を設定します。PDF Thumbnail ImageのSelect Thumbボタンをクリックします。メディアライブラリからサムネイル画像を選択し、Send to dFlipボタンをクリックします。これで、PDF、サムネイル設定完了です。

General / Rayout

デフォルトでは、ページをめくる度に効果音が鳴るので、消音にします。General / Rayout＞CONTROLSのAuto Enable Soundの設定をFalseに設定します。これで消音設定完了です。右の公開ボタンをクリックします。

設置

右上のShortcodeのLightBox(Popup)のショートコードをコピーします。編集画面を開き、ショートコードブロックにショートコードをペーストしたら設置完了です。

以上で今回の説明は終了です。デザインされたカタログの見開きも見れるのでオススメです。シェアボタンや拡大縮小ボタンもあるので、SPでも使いやすいプラグインです。