UI

Customizing flipbook UI (toolbar) layout and style

Removing buttons

Each button can be removed from the toolbar, with enabled: false, for example to remove buttons Print and Download pages

btnPrint: {enabled: false}, 
btnDownloadPages: {enabled: false}

Layout

There are 4 predefined layouts that you can choose from, with option

layout: "1", //"1", "2", "3", "4"

Layout "1":

Default

layout "2" :

currentPage: { vAlign: 'bottom', hAlign: 'center' },
btnAutoplay: { hAlign: 'left' },
btnSound: { hAlign: 'left' },
btnExpand: { hAlign: 'right' },
btnZoomIn: { hAlign: 'right' },
btnZoomOut: { hAlign: 'right' },
btnSearch: { hAlign: 'left' },
btnBookmark: { hAlign: 'left' },
btnToc: { hAlign: 'left' },
btnThumbs: { hAlign: 'left' },
btnShare: { hAlign: 'right' },
btnPrint: { hAlign: 'right' },
btnDownloadPages: { hAlign: 'right' },
btnDownloadPdf: { hAlign: 'right' },
btnSelect: { hAlign: 'right' },

layout "3"

menuTransparent: true,
menu2Transparent: false,
menu2OverBook: false,
menu2Padding: 5,
btnMargin: 5,
currentPage: { vAlign: 'top', hAlign: 'center' },
btnPrint: { vAlign: 'top', hAlign: 'right' },
btnDownloadPdf: { vAlign: 'top', hAlign: 'right' },
btnDownloadPages: { vAlign: 'top', hAlign: 'right' },
btnThumbs: { vAlign: 'top', hAlign: 'left' },
btnToc: { vAlign: 'top', hAlign: 'left' },
btnBookmark: { vAlign: 'top', hAlign: 'left' },
btnSearch: { vAlign: 'top', hAlign: 'left' },
btnSelect: { vAlign: 'top', hAlign: 'right' },
btnShare: { vAlign: 'top', hAlign: 'right' },
btnAutoplay: { hAlign: 'right' },
btnExpand: { hAlign: 'right' },
btnZoomIn: { hAlign: 'right' },
btnZoomOut: { hAlign: 'right' },
btnSound: { hAlign: 'right' },
menuPadding: 5,

layout "4":

menu2Transparent: false,
menu2OverBook: false,
sideMenuOverMenu2: false,
currentPage: { vAlign: 'top', hAlign: 'center' },
btnAutoplay: { vAlign: 'top', hAlign: 'left' },
btnSound: { vAlign: 'top', hAlign: 'left' },
btnExpand: { vAlign: 'top', hAlign: 'right' },
btnZoomIn: { vAlign: 'top', hAlign: 'right' },
btnZoomOut: { vAlign: 'top', hAlign: 'right' },
btnSearch: { vAlign: 'top', hAlign: 'left' },
btnBookmark: { vAlign: 'top', hAlign: 'left' },
btnToc: { vAlign: 'top', hAlign: 'left' },
btnThumbs: { vAlign: 'top', hAlign: 'left' },
btnShare: { vAlign: 'top', hAlign: 'right' },
btnPrint: { vAlign: 'top', hAlign: 'right' },
btnDownloadPages: { vAlign: 'top', hAlign: 'right' },
btnDownloadPdf: { vAlign: 'top', hAlign: 'right' },
btnSelect: { vAlign: 'top', hAlign: 'right' },

Layout is basically a set of options. Each layout is a set of options, that can be customized further. For example you have customize layout "2" to move all buttons to top like this

layout: "2",
menu2Transparent: false,
menu2OverBook: false,
currentPage: { vAlign: 'top', hAlign: 'center' },
btnAutoplay: { vAlign: 'top'},
btnSound: { vAlign: 'top'},
btnExpand: { vAlign: 'top'},
btnZoomIn: { vAlign: 'top' },
btnZoomOut: { vAlign: 'top' },
btnSearch: { vAlign: 'top' },
btnBookmark: { vAlign: 'top' },
btnToc: { vAlign: 'top' },
btnThumbs: { vAlign: 'top' },
btnShare: { vAlign: 'top' },
btnPrint: { vAlign: 'top' },
btnDownloadPages: { vAlign: 'top' },
btnDownloadPdf: { vAlign: 'top' },
btnSelect: { vAlign: 'top' },

Skins

There are 3 predefined skins

skin: "light", //"dark", "light", "gradient"

Advanced Customization

There are many other options for customizing the flipbook UI.

The full list of options that you can override to customize the flipbook UI is here

Here are some of the available options

Skin Colors

skinColor: '', // Primary color.
skinBackground: '', // Secondary color.

menuOverBook: false,
menuFloating: false,
menuBackground: '',
menuShadow: '',
menuMargin: 0,
menuPadding: 0,
menuTransparent: false,

menu2OverBook: true,
menu2Floating: false,
menu2Background: '',
menu2Shadow: '',
menu2Margin: 0,
menu2Padding: 0,
menu2Transparent: true,

Buttons

btnColor: '',
btnBackground: 'none',
btnSize: 14,
btnRadius: 2,
btnMargin: 2,
btnPaddingV: 10,
btnPaddingH: 10,
btnShadow: '',
btnTextShadow: '',
btnBorder: '',
btnColorHover: "",
btnBackgroundHover: '',

Side Buttons (Arrows)

sideBtnColor: '#FFF',
sideBtnBackground: '#00000033',
sideBtnSize: 30,
sideBtnRadius: 0,
sideBtnMargin: 0,
sideBtnPaddingV: 5,
sideBtnPaddingH: 0,
sideBtnShadow: '',
sideBtnTextShadow: '',
sideBtnBorder: '',
sideBtnColorHover: "#FFF",
sideBtnBackgroundHover: '#00000066',

Floating Buttons (Alternative button style)

floatingBtnColor: "#EEE",
floatingBtnColorHover: "",
floatingBtnBackground: "#00000044",
floatingBtnBackgroundHover: '',
floatingBtnSize: null,
floatingBtnRadius: null,
floatingBtnMargin: null,
floatingBtnPadding: null,
floatingBtnShadow: '',
floatingBtnTextShadow: '',
floatingBtnBorder: '',

Customize Buttons

Each button in the toolbar can be customized. Button options look like this:

buttonName: {
    enabled: true, // If displayed in the menu.
    title: "Button name", // Title to display on hover.
}

Buttons can also have properties

iconFA: "flipbook-icon-angle-double-left", // Font Awesome icon from custom icon font.
iconM: "flipbook-icon-first_page", // Material icon from custom icon font.
vAlign: 'top', // top or bottom
hAlign: 'left', // left, right or center
marginH: 0, // Button horizontal margin, Number.
marginV: 0, // Button vertical margin, Number.
color: '', // Button color, CSS value.
background: '' // Button background, CSS value.
hideOnMobile: false // Hide button on mobile devices.

Button Defaults

currentPage: {
    enabled: true,
    title: "Current page",
    vAlign: 'top',
    hAlign: 'left',
    marginH: 0,
    marginV: 0,
    color: '',
    background: ''
},

btnFirst: {
    enabled: false,
    title: "First page",
    iconFA: "flipbook-icon-angle-double-left",
    iconM: "flipbook-icon-first_page"
},

btnPrev: {
    enabled: true,
    title: "Previous page",
    iconFA: "flipbook-icon-angle-left",
    iconM: "flipbook-icon-keyboard_arrow_left"
},

btnNext: {
    enabled: true,
    title: "Next page",
    iconFA: "flipbook-icon-angle-right",
    iconM: "flipbook-icon-keyboard_arrow_right"
},

btnLast: {
    enabled: false,
    title: "Last page",
    iconFA: "flipbook-icon-angle-double-right",
    viconM: "flipbook-icon-last_page"
},

btnZoomIn: {
    enabled: true,
    title: "Zoom in",
    iconFA: "flipbook-icon-plus",
    iconM: "flipbook-icon-add"
},

btnZoomOut: {
    enabled: true,
    title: "Zoom out",
    iconFA: "flipbook-icon-minus",
    iconM: "flipbook-icon-remove1"
},

btnRotateLeft: {
    enabled: false,
    title: "Rotate left",
    iconFA: "flipbook-icon--undo"
},

btnRotateRight: {
    enabled: false,
    title: "Rotate right",
    iconFA: "flipbook-icon--redo"
},

btnAutoplay: {
    enabled: true,
    title: "Autoplay",
    iconFA: "flipbook-icon-play",
    iconM: "flipbook-icon-play_arrow",
    iconFA_alt: "flipbook-icon-pause",
    iconM_alt: "flipbook-icon-pause1",
},

btnSearch: {
    enabled: false,
    title: "Search",
    iconFA: "flipbook-icon-search",
    iconM: "flipbook-icon-search1"
},

btnSelect: {
    enabled: true,
    title: "Select tool",
    iconFA: "flipbook-icon-i-cursor",
    iconM: "flipbook-icon-text_format"
},

btnBookmark: {
    enabled: true,
    title: "Bookmark",
    iconFA: "flipbook-icon-bookmark",
    iconM: "flipbook-icon-bookmark1"
},

btnNotes: {
    enabled: false,
    title: "Notes",
    iconFA: "flipbook-icon-comment",
    iconM: "flipbook-icon-chat_bubble"
},

btnToc: {
    enabled: true,
    title: "Table of Contents",
    iconFA: "flipbook-icon-list-ol",
    iconM: "flipbook-icon-toc"
},

btnThumbs: {
    enabled: true,
    vtitle: "Pages",
    iconFA: "flipbook-icon-th-large",
    iconM: "flipbook-icon-view_module"
},

btnShare: {
    enabled: true,
    title: "Share",
    iconFA: "flipbook-icon-share-alt",
    iconM: "flipbook-icon-share1",
    hideOnMobile: true
},

btnPrint: {
    enabled: true,
    title: "Print",
    iconFA: "flipbook-icon-print",
    iconM: "flipbook-icon-local_printshop",
    hideOnMobile: true
},

btnDownloadPages: {
    enabled: true,
    title: "Download pages",
    iconFA: "flipbook-icon-download",
    iconM: "flipbook-icon-file_download",
    url: "images/pages.zip",
    name: "allPages.zip"
},

btnDownloadPdf: {
    forceDownload: false,
    enabled: true,
    title: "Download PDF",
    iconFA: "flipbook-icon-file",
    iconM: "flipbook-icon-picture_as_pdf",
    url: null,
    openInNewWindow: true,
    name: "allPages.pdf"
},

btnSound: {
    enabled: true,
    title: "Volume",
    iconFA: "flipbook-icon-volume-up",
    iconFA_alt: "flipbook-icon-volume-off",
    iconM: "flipbook-icon-volume_up",
    iconM_alt: "flipbook-icon-volume_mute",
    hideOnMobile: true
},

btnExpand: {
    enabled: true,
    title: "Toggle fullscreen",
    iconFA: "flipbook-icon-expand",
    iconM: "flipbook-icon-fullscreen",
    iconFA_alt: "flipbook-icon-compress",
    iconM_alt: "flipbook-icon-fullscreen_exit"
},

btnClose: {
    title: "Close",
    iconFA: "flipbook-icon-times",
    iconM: "flipbook-icon-clear",
    hAlign: 'right',
    vAlign: 'top',
    size: 20
}

PreviousCustomizing Flipbook NextBook

Last updated 6 months ago

Real3D Flipbook jQuery plugin

UI