View Categories

Basic Usages

2 min read

You can create flipbooks as embedded, or light-boxes by using the related CSS classes.

  • _df_book  : Creates a embedded flipbook
  • _df_thumb : Creates a thumbnail that will open as a popup flipbook
  • _df_button : Creates a button that will open as a popup flipbook
  • _df_custom : Wraps anything inside the element to trigger a popup flipbook.

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.

<!--Embedded Usage--> 
<div class="_df_book" source="http://www.yoursite.com/books/intro.pdf"></div>

<!--Button Lightbox Usage--> 
<div class="_df_button" source="http://www.yoursite.com/books/intro.pdf"> Intro Book</div>

<!--Thumbnail Lightbox Usage Images-->
<div class="_df_thumb" source="http://www.yoursite.com/books/intro.pdf"
     tags="3d,images" thumb="http://www.yoursite.com/books/thumbs/intro.jpg">Images</div>

LightBox Popup Examples: Click on these thumbs and buttons

Dflip Manual Images Dflip Manual

Using HTML and JavaScript (Recommended) #

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 – detailed in example below.

In the above usage you create only embed mode flipbook. so that usage is limited. We use and recommend the CSS and option method for best results. You can see this used in the flipbook examples page.

<div class="_df_button" id="button_pdf">Dflip Manual</div>
<div class="_df_button" id="button_image">Dflip Pictures</div>
//Just add option_ in front of the element id to create the required option variable
var option_button_pdf = {
    source:'http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf',
    webgl:true,
    height:500
    //we recommend using default auto height
};

var option_button_image = {
     source : ['http://www.yoursite.com/books/thumbs/alice.jpg',
               'http://www.yoursite.com/books/thumbs/dflip.jpg',
               'http://www.yoursite.com/books/thumbs/nightangle.jpg'],
     webgl:true
};

JavaScript variable can be added anywhere just make sure it’s available before page load.

Element id : button_pdf, option variable name : option_button_pdf

jQuery Function(Not recommended): #

We do support jQuery function with selector, but we don’t recommend it because of its technical requirements to insert inside proper jQuery ready function or called after everything has been loaded. Don’t use predefined classes like _df_book, _df_thumb, _df_button, _df_link with jquery function syntax.

<div id="flipbookImageContainer"></div>
<div id="flipbookPDFContainer"></div>
//best to start when the document is loaded
jQuery(document).ready(function () {

    //For IMAGES
    var source_images = ['http://www.yoursite.com/books/thumbs/alice.jpg',
                        'http://www.yoursite.com/books/thumbs/dflip.jpg',
                        'http://www.yoursite.com/books/thumbs/nightangle.jpg'];
    var option_images = {webgl:true};

    var flipBook_images = $("#flipbookImageContainer").flipBook(source_images,option_images);

    //FOR PDFs 
    var source_pdf = "http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf";
    var option_pdf = {webgl:true};

    var flipBook_pdf = $("#flipbookPDFContainer").flipBook(source_pdf,option_pdf);
));

Leave a Comment