Flipbook options

Useful flipbook options

Table of Contents

Table of Contents for flipbook can be defined in couple of ways.

First method is with tableOfContents array, for example

tableOfContents: [
    { 
        title: "Cover", 
        page: "1" 
    },
    { 
        title: "Second page", 
        page: "2" 
    },
    { 
        title: "Last page", 
        page: "4" 
    },
]

It can also be defined by setting title attribute for pages in pages array. Pages that have title will show up in Table of Contents

pages : [
    {
        src: "...",
        thumb: "...",
        title: "First page"
    },
    {
        src: "...",
        thumb: "...",
        title: "Second page"
    },
    {
        src: "...",
        thumb: "..."
    },
    ...
    {
        src: "...",
        thumb: "...",
        title: "Last page"
    }
]

For PDF flipbook, if PDF has outline embedded, flipbook will automatically show the PDF outline as Table of Contents.

Lightbox

Lightbox allows you to open the flipbook after an element on the page is clicked (image, button or any other element). Enable lightbox with option

lightBox: true

Creating a flipbook that will open when a button is clicked:

<button id="book1">Read book 1</button>

const options = {
    pdfUrl: '1.pdf',
    lightBox: true
}

new Flipbook(container, options)

Instead of button, any element can be used.

Lightbox flipbook will start to load pages only after the flipbook is opened, so this is very useful if you want to have multiple flipbooks on the same page.

Deep linking

Deep linking allows you to open a flipbook at a certain page directly with a link.

Enable the deep linking by setting a custom prefix, for example

deeplinkingPrefix: 'book1_'

Now you can link to page 2 of the flipbook (or any page) by adding #book1_2 at the end of the page URL

Google Analytics

By adding UA or GA4 property ID, you will be able to track custom events from flipbook in that property.

googleAnalyticsTrackingCode: // Your property ID, starting with "G-" or "UA-"

Mobile

Override any option for mobile, this can be used to slightly adjust or create entirely different flipbook for mobile.

Example of different settings for mobile

const options = {
    pdfUrl: '1.pdf',
    mobile: {
        viewMode: "swipe",
        singlePageMode: true,
        zoomMin: 1
    }
}
new Flipbook(container, options)

Other options

Many other options are available, the full list is here