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.
Here are some of the available options
Skin Colors
skinColor: '', // Primary color.
skinBackground: '', // Secondary color.
Bottom Menu
menuOverBook: false,
menuFloating: false,
menuBackground: '',
menuShadow: '',
menuMargin: 0,
menuPadding: 0,
menuTransparent: false,
Top Menu
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
}
Last updated