Javascript

WowBook jQueryFlipbookプラグインの使用方法



How Use Wowbook Jquery Flipbook Plugin



写真やPDFファイルをインタラクティブなフリップブックやスライドに変換できる使いやすいツールをお探しの場合は、 WowBookはCodeCanyonにあります 最も人気のあるjQueryプラグイン 1 、あなたにとても適しています。 この高度なプラグインは、ページめくり音付きの2つのリアルなページめくり効果を提供し、最新のすべてのブラウザーでスムーズに実行できます。

WowBookプラグインで作成されたフリップブックは応答性が高く、デスクトップおよびモバイルデバイスで見栄えがします。 さらに、ピンチしてズームするなど、一般的なタッチジェスチャもサポートしています。



このチュートリアルでは、WowBookをWebページに追加し、WowBookが提供するすべての機能を最大限に活用する方法を紹介します。

まだの場合 EnvatoMarketアカウント 、今すぐ作成してください。 次に、CodeCanyonにログインして、ライセンスを購入します WowBook 。



CodeCanyonのWowBook

これで、プラグインに関連するすべての必要なファイルとドキュメントを含むZIPファイルをダウンロードできるようになります。 ファイルには、という名前のファイルがあります wow_book プラグインのソースコードの最小バージョンを含むディレクトリ。 WowBookを使用するには、このディレクトリを開発環境に解凍する必要があります。

この時点で、WowBook jQueryプラグインをWebページに追加するには、次のJavaScriptファイルとCSSファイルを含めるだけです。

wowBook()

PDFファイルでWowBookを使用する予定がない場合は、省略できることに注意してください pdf.combined.min.js 。



このjQueryプラグインは古いバージョンのjQueryをサポートしていますが、このチュートリアルではjQueryv3.3.1を使用します。

すべてのWowBookに必要なのは、ワークブックのページをレンダリングするためのemptyElementsです。 次に、次のコードで作成します。

wowBook()

次に、JavaScriptコードで、Elementを選択し、それをpdf method $('#my_flip_book').wowBook({ pdf: 'sample.pdf' }) bookと呼ぶことができます。 このメソッドには、パラメーターとして、ブックの構成に関する詳細情報を含むJavaScriptオブジェクトが必要です。

WowBookは、直感的に名前が付けられた多くの構成オプションを提供します。 たとえば、ブック内のPDFファイルのページをレンダリングするには、container Optionを使用して、ファイルの場所を指定できます。

true

上記のコードは単純なワークブックを生成するのに十分ですが、そのサイズはPDFファイルのページサイズによって異なります。 フリップブックのサイズをより適切に制御するために、containerWidthオプションはcontainerHeightに設定されています。 。 その後、使用できるようになりますcontainerBackground with $('#my_flip_book').wowBook({ container: true, containerHeight: 670, containerWidth: 830, pdf: 'sample.pdf', containerBackground: '#333' })オプションは希望のサイズ（ピクセル単位）を指定します。

デフォルトでは、コンテナは透過的です。 必要に応じて、 オプションを使用して単色で表示できます。

my_flip_book

ここでブラウザでWebページを開くと、ブックが表示されるはずです。 本の隅にマウスを置くと、カールのアニメーションが表示されます。 次に、コーナーをクリックまたはドラッグしてページをめくることができます。

PDF

ページめくりの本のページをめくると、ほとんどのブラウザでページめくりの音が聞こえるはずです。

WowBookは、カスタマイズされたPDFビューア以上のものです。 また、HTMLコンテンツからフリップブックをすばやく生成するためにも使用できます。

たとえば、次のコードは4ページのワークブックを作成し、各ページに1枚の写真を表示します。

上記のコードでは、photo EachElementsはページの1ページに相当します。

各 .photo { width: 100% } 要素には名前wowBook()タイプがあることに気づいたかもしれません。 このクラスを使用すると、必要な写真のサイズをすばやく指定できます。 たとえば、写真のアスペクト比を同じに保ちながらページを完全に覆う場合は、次のCSSルールを使用できます。

wowBook()

前のステップですでに学習したように、ここでpdf method $('#my_album').wowBook({ container: true, containerHeight: 670, containerWidth: 940 }) bookを呼び出す必要があります。 ただし、アクティビティブックのコンテンツはHTMLコードで定義されているため、今回はhardcoversオプションは必要ありません。

true

パラパラマンガは次のようになります。

画像

便利で面白い写真がない場合は、ダウンロードできます PhotoDune または ペクセル ダウンロード。

WowBookはハードカバーのパラパラマンガを生成することもできます。 いつtoolbarオプションがtoolbarPositionに設定されます、プラグインは最初と最後のページに代替アニメーションを適用し、それらをより縮れにくく、より硬く見せます。

画像

WowBookを使用すると、さまざまなナビゲーションコントロールを含むツールバーをフリップブックに追加できます。 ツールバーを作成するには、topオプションを使用し、必要なコントロールの名前を表示したい順序で指定する必要があります。 （オプション）次を使用できますbottomこのオプションは、ツールバーを表示する場所を指定します。 現在、このオプションは2つの値のみをサポートしています：$('#my_album').wowBook({ container: true, containerHeight: 670, containerWidth: 940, hardcovers: true, toolbar: 'back, next, first, last', toolbarPosition: 'bottom' }) with share 。

たとえば、次のコードは、ワークブックの下に表示される4つのコントロールを備えたツールバーを作成します。

toolbar

ツールバーは次のとおりです。

画像

ナビゲーション用のボタンに加えて、ツールバーには、ユーザーがTwitter、Facebook、Reddit、およびその他の人気のソーシャルネットワーキングプラットフォームでフリップブックを簡単に共有できるボタンを含めることもできます。 このようなボタンを表示するには、$('#my_album').wowBook({ container: true, containerHeight: 670, containerWidth: 940, hardcovers: true, toolbar: 'back, next, first, last, share', toolbarPosition: 'bottom', share: 'twitter, facebook, reddit' })オプションを使用する必要があります。 さらに、「share」文字列をshare Optionsに追加する必要があります。 次のコードは、その方法を示しています。

var tableOfContents = [ ['Eiffel Tower', 0], ['Breakfast', 1], ['Snowy Day', 2], ['Mountains', 3], ]

ツールバーに、オプションに記載されているソーシャルネットワークのアイコン 'tocが表示されます。

画像

多くのページを含むフリップブックを表示する場合は、目次を表示するパネルを使用して、ユーザーが任意のページにジャンプできるようにすることができます。 このようなパネルを作成するには、JavaScript配列が必要です。この配列の各要素は、タイトルとページ番号を関連付けます。

これは、前に作成したページフリップブックの4ページすべてのタイトルを提供する配列の例です。

displayToc

ご覧のとおり、上記の配列の各項目はそれ自体が配列であり、最初の要素がタイトルで、2番目の要素がページ番号です。

アレイをフリップブックに関連付けるには、trueオプションを使用する必要があります。 さらに、to toc Optionがtoolbarまたは文字列$('#my_album').wowBook({ container: true, containerHeight: 670, containerWidth: 940, hardcovers: true, toolbar: 'back, next, first, last, toc', toolbarPosition: 'bottom', displayToc: true, toc: tableOfContents }) add to slideShow Optionsに設定されていることを覚えておく必要があります。 そうしないと、ユーザーにはディレクトリが表示されません。

true

これは、次のようにディレクトリを表示するパネルです。

画像

置くことによってslideShowDelayオプションはslideShowLoopに設定されます、ワークブックをアニメーションのスライドショーに変換できます。 このモードでは、WowBookはフリップブックのすべてのページを自動的にめくります。 デフォルトでは、各ページは1秒間だけ表示されます。 この期間を変更するには、trueオプションを使用できます。 また、最後のページが表示された後にプラグインでスライドショーを再開する場合は、$('#my_album').wowBook({ container: true, containerHeight: 670, containerWidth: 940, slideShow: true, slideShowDelay: 3000, slideShowLoop: true })オプションを

に設定してください。 。 
 
 次のサンプルコードは、各ページが3秒間表示される繰り返しスライドショーを作成します。 
結論として
 
 これで、WowBookjQueryプラグインを使用してアニメーションブックを作成する方法がわかりました。 このチュートリアルでは、目次と本をめくるための直感的なツールバーをすばやく生成する方法も学びました。 
 
 プラグインの詳細については、ダウンロードしたZIPファイルで提供されている広範なドキュメントと例を参照してください。 WowBookには6か月間の無料サポートがあるため、作成者に連絡することもできます maguiar01 さらにヘルプが必要です。 
 
 
翻訳元： https://code.tutsplus.com/tutorials/how-to-use-the-wowbook-jquery-flipbook-plugin--cms-32575