3D FlipBookで、アニメーション付きでPDFを見開き表示
以前PDF Embedderを紹介しましたが、1ページづつしか表示されませんでした。書類などは向いていますが、カタログなど見開きで見せるものは不向きでした。今回は、PDFプラグイン3D FlipBookで、アニメーション付きでPDFを見開き表示する方法を紹介します。
出典 : 3D FlipBook
今回のDEMOは、チョコレートカタログのPDFです。
アイコンをクリックすると、ライトボックスでPDFが表示されます。アニメーションでページ遷移します。
dFlip Settings
まず、プラグインをインストール有効化します。左サイドメニューのdFlip Books>Add New Bookをクリックします。設定画面が表示されるので、下のdFlip Settingsから、PDF設定をして行きます。
dFlip Books>Add New Bookをクリック
設定画面が表示
Source
タイトルを入力します。PDF FileのSelect PDFボタンをクリックします。メディアファイルからPDFファイルを選択し、Send to dFlipボタンをクリックします。
PDF FileのSelect PDFボタンをクリック
PDFファイルを選択
次にサムネイル画像を設定します。PDF Thumbnail ImageのSelect Thumbボタンをクリックします。メディアライブラリからサムネイル画像を選択し、Send to dFlipボタンをクリックします。これで、PDF、サムネイル設定完了です。
PDF Thumbnail ImageのSelect Thumbボタンをクリック
サムネイル画像を選択
PDF、サムネイル設定完了
General / Rayout
デフォルトでは、ページをめくる度に効果音が鳴るので、消音にします。General / Rayout>CONTROLSのAuto Enable Soundの設定をFalseに設定します。これで消音設定完了です。右の公開ボタンをクリックします。
Auto Enable Soundの設定をFalseに設定
公開ボタンをクリック
設置
右上のShortcodeのLightBox(Popup)のショートコードをコピーします。編集画面を開き、ショートコードブロックにショートコードをペーストしたら設置完了です。
LightBox(Popup)のショートコードをコピー
ショートコードブロックにショートコードをペースト
以上で今回の説明は終了です。デザインされたカタログの見開きも見れるのでオススメです。シェアボタンや拡大縮小ボタンもあるので、SPでも使いやすいプラグインです。