{"id":4193,"date":"2023-10-13T19:45:01","date_gmt":"2023-10-13T14:00:01","guid":{"rendered":"https:\/\/jquery.dearflip.com\/?post_type=docs&#038;p=4193"},"modified":"2023-12-14T16:26:35","modified_gmt":"2023-12-14T10:41:35","password":"","slug":"basic-usages","status":"publish","type":"docs","link":"https:\/\/js.dearflip.com\/docs\/basic-usages\/","title":{"rendered":"Basic Usages"},"content":{"rendered":"\n<p>You can create flipbooks as embedded, or light-boxes by using the related <strong>CSS classes<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>_df_book<\/strong>&nbsp; : Creates a embedded flipbook<\/li>\n\n\n\n<li><strong>_df_thumb<\/strong> : Creates a thumbnail that will open as a popup flipbook<\/li>\n\n\n\n<li><strong>_df_button<\/strong> : Creates a button that will open as a popup flipbook<\/li>\n\n\n\n<li><strong>_df_custom<\/strong> : Wraps anything inside the element to trigger a popup flipbook.<\/li>\n<\/ul>\n\n\n\n<p><strong><a href=\"https:\/\/js.dearflip.com\/flipbook-examples\/\">SEE EXAMPLES<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using HTML (Recommended):<\/h2>\n\n\n\n<p>Embedded will be created with page load and ready to use, where as light-boxes will be like popup that need to be open just like apps in mobile phones.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!--Embedded Usage--&gt; \n&lt;div class=\"_df_book\" source=\"http:\/\/www.yoursite.com\/books\/intro.pdf\"&gt;&lt;\/div&gt;\n\n&lt;!--Button Lightbox Usage--&gt; \n&lt;div class=\"_df_button\" source=\"http:\/\/www.yoursite.com\/books\/intro.pdf\"&gt; Intro Book&lt;\/div&gt;\n\n&lt;!--Thumbnail Lightbox Usage Images--&gt;\n&lt;div class=\"_df_thumb\" source=\"http:\/\/www.yoursite.com\/books\/intro.pdf\"\n&nbsp;    tags=\"3d,images\" thumb=\"http:\/\/www.yoursite.com\/books\/thumbs\/intro.jpg\"&gt;Images&lt;\/div&gt;<\/pre>\n\n\n\n<p>LightBox Popup Examples: Click on these thumbs and buttons<\/p>\n\n\n<a class=\"_df_button \"  href=\"#\"  data-title=\"dflip-manual\" id=\"df_df_manual_button\" data-df-option=\"df_option_df_manual_button\" data-source=\"https:\/\/js.dearflip.com\/wp-content\/uploads\/2019\/07\/dearpdf-manual.pdf\"  >Dflip Manual<\/a><script class=\"df-shortcode-script\" nowprocket type=\"application\/javascript\">window.df_option_df_manual_button = {\"source\":\"https:\\\/\\\/js.dearflip.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/dearpdf-manual.pdf\",\"id\":\"df_manual_button\"}; if(window.DFLIP && window.DFLIP.parseBooks){window.DFLIP.parseBooks();}<\/script>\n\n\n<a class=\"_df_thumb \"  href=\"#\"  data-title=\"images\" id=\"df_df_manual_thumb\" data-df-option=\"df_option_df_manual_thumb\" data-source=\"https:\/\/js.dearflip.com\/wp-content\/uploads\/2019\/07\/dearpdf-manual.pdf\"  >Images<\/a><script class=\"df-shortcode-script\" nowprocket type=\"application\/javascript\">window.df_option_df_manual_thumb = {\"source\":\"https:\\\/\\\/js.dearflip.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/dearpdf-manual.pdf\",\"id\":\"df_manual_thumb\"}; if(window.DFLIP && window.DFLIP.parseBooks){window.DFLIP.parseBooks();}<\/script>\n\n\n<a class=\"_df_link \"  href=\"#\"  data-title=\"dflip-manual\" id=\"df_df_manual_custom\" data-df-option=\"df_option_df_manual_custom\" data-source=\"https:\/\/js.dearflip.com\/wp-content\/uploads\/2019\/07\/dearpdf-manual.pdf\"  >Dflip Manual<\/a><script class=\"df-shortcode-script\" nowprocket type=\"application\/javascript\">window.df_option_df_manual_custom = {\"source\":\"https:\\\/\\\/js.dearflip.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/dearpdf-manual.pdf\",\"id\":\"df_manual_custom\"}; if(window.DFLIP && window.DFLIP.parseBooks){window.DFLIP.parseBooks();}<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Using HTML and JavaScript (Recommended)<\/h2>\n\n\n\n<p>You can use images and PDFs as source, while PDFs source can be provided as html attribute images need to be added through JavaScript as array &#8211; detailed in example below.<\/p>\n\n\n\n<p>In the above usage you create only embed mode flipbook. so that usage is limited. We use and recommend the <strong>CSS and option method<\/strong> for best results. You can see this used in the <a href=\"https:\/\/js.dearflip.com\/flipbook-examples\/\"><strong>flipbook examples page<\/strong><\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"_df_button\" id=\"button_pdf\"&gt;Dflip Manual&lt;\/div&gt;\n&lt;div class=\"_df_button\" id=\"button_image\"&gt;Dflip Pictures&lt;\/div&gt;<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/Just add option_ in front of the element id to create the required option variable\nvar option_button_pdf = {\n    source:'http:\/\/www.yoursite.com\/someplace\/pdf-to-be-loaded.pdf',\n    webgl:true,\n    height:500\n    \/\/we recommend using default auto height\n};\n\nvar option_button_image = {\n    &nbsp;source : ['http:\/\/www.yoursite.com\/books\/thumbs\/alice.jpg',\n               'http:\/\/www.yoursite.com\/books\/thumbs\/dflip.jpg',\n               'http:\/\/www.yoursite.com\/books\/thumbs\/nightangle.jpg'],\n     webgl:true\n};<\/pre>\n\n\n\n<p>JavaScript variable can be added anywhere just make sure it&#8217;s available before page load.<\/p>\n\n\n\n<p>Element id : <em><strong>button_pdf, <\/strong><\/em>option variable name : <strong>option_<em>button_pdf<\/em><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">jQuery Function(Not recommended):<\/h2>\n\n\n\n<p>We do support jQuery function with selector, but we don&#8217;t recommend it because of its technical requirements to insert inside proper jQuery ready function or called after everything has been loaded. Don&#8217;t use predefined classes like _df_book, _df_thumb, _df_button, _df_link with jquery function syntax.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"flipbookImageContainer\"&gt;&lt;\/div&gt;<br>&lt;div id=\"flipbookPDFContainer\"&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/best to start when the document is loaded\njQuery(document).ready(function () {\n\n    \/\/For IMAGES<br>    var source_images = ['http:\/\/www.yoursite.com\/books\/thumbs\/alice.jpg',<br>                        'http:\/\/www.yoursite.com\/books\/thumbs\/dflip.jpg',<br>                        'http:\/\/www.yoursite.com\/books\/thumbs\/nightangle.jpg'];<br>    var option_images = {webgl:true};<br>\n   &nbsp;var flipBook_images = $(\"#flipbookImageContainer\").flipBook(source_images,option_images);\n\n    \/\/FOR PDFs <br>    var source_pdf = \"http:\/\/www.yoursite.com\/someplace\/pdf-to-be-loaded.pdf\";<br>    var option_pdf = {webgl:true};<br><br>    var flipBook_pdf = $(\"#flipbookPDFContainer\").flipBook(source_pdf,option_pdf);\n));<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>You can create flipbooks as embedded, or light-boxes by using the related CSS classes. SEE EXAMPLES Using HTML (Recommended): Embedded will be created with page load and ready to use, where as light-boxes will be like popup that need to be open just like apps in mobile phones. &lt;!&#8211;Embedded Usage&#8211;&gt; &lt;div class=&#8221;_df_book&#8221; source=&#8221;http:\/\/www.yoursite.com\/books\/intro.pdf&#8221;&gt;&lt;\/div&gt; &lt;!&#8211;Button Lightbox &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Basic Usages\" class=\"read-more button\" href=\"https:\/\/js.dearflip.com\/docs\/basic-usages\/\" aria-label=\"Basic Usages\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"doc_category":[117],"doc_tag":[],"class_list":["post-4193","docs","type-docs","status-publish","hentry","doc_category-getting-started"],"aioseo_notices":[],"year_month":"2026-05","word_count":591,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Deepak Ghimire","author_nicename":"deip-ghimire","author_url":"https:\/\/js.dearflip.com\/author\/deip-ghimire\/"},"doc_category_info":[{"term_name":"Getting Started","term_url":"https:\/\/js.dearflip.com\/docs-category\/getting-started\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs\/4193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/comments?post=4193"}],"version-history":[{"count":2,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs\/4193\/revisions"}],"predecessor-version":[{"id":4251,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs\/4193\/revisions\/4251"}],"wp:attachment":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/media?parent=4193"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/doc_category?post=4193"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/doc_tag?post=4193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}