Getting Started

3D Flip Book, a powerful, responsive, and extremely customizable, versatile 3D Flip Bool with image (.jpg, .jpg, .png, .webp) support, seamlessly running on all major browsers and mobile devices, including iPhone, iPad, iOS, Android, MAC, and Windows, elevating your website's audio experience to a whole new level.

It is built using EcmaScript6 using the latest JavaScript and CSS standards. The flip book is using Three.js and WebGL shaders running exclusively on the device's GPU, the interface like buttons are in is HTML.

Please note that it will not work locally, it has to run on an HTTP or HTTPS protocol.

It is crucial to optimize your images, especially since they are used as textures. Larger image files demand more GPU power to display due to the increased number of pixels. To minimize performance impact, select images that are visually close in size to the flip book. After you have the final images use tinypng to reduce the iages size without losing quality, there are other similar tool.

Please note that the mettrix are units so visual aproximation is needed, since the flip book runs in 3D space and various aspects like camera position or camera rotation, using pixels is not possible.

Installation

There are a few HTML filse included in the build folder.

Choose one of the preset HTML files from the build folder and open it in a text editor as a refference.

In the download files inside the build folder you will find the src folder that contains the JavaScript code and content folder that contains the CSS file and other important files like the vector font, the content folder has to be uploaded on the server where the flip book is used.

Include the flip book CSS file and JavaScript in the header:

<head>

<!-- ... -->
<link rel="stylesheet" href="./content/global.css">
<script type="text/javascript" src="./src/FWDUFB.js"></script>
<!-- ... -->	

</head>

The next step is to add the initialize code in the page header or footer after the inclusion of the flip book JavaScript and CSS files.

<script type="text/javascript">
	if(document.readyState == 'complete'){
		fwdSetupUFB();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdSetupUFB();
		});
	}

	function fwdSetupUFB(){
		
		new FWDUFB({
                    
			// Main settings.  
            instance: 'fwdufb0',
            parentId: 'myDiv',
            bookDataId: 'bookData',
            displayType: 'responsive',
            initializeWhenVisible: 'yes',
            maxWidth: 1920,
            startResizingWidth: 1200,
            maxHeight:1000,
            stopScrollingForPx: 2000,
            paralax: 'yes',
            autoScale: 'yes',
            centerOpenPages: 'no',
            centerOpenPagesOnSmallScreens: 650,
            stats: 'yes',
            gui: 'yes',
            roughnessTextureSrc: 'content/roughness.png',
            loadingPageTextureSrc: 'content/white.png',
            envMapSource: 'content/studio_small_09_1k.exr',
            envMapIntensity: 0.1,
            showPreloader: 'yes',
            preloaderColor: '#FFFFFF',
            backgroundColor: 'rgba(0, 0, 0, 1)',
            fullscreenBackgroundColor: 'rgba(0, 0, 0, 1)',
            useAudio: 'yes',
            pageRatio: 0.76,
            pageDepth: 1,
            startAtPage: 0,
            useAnimatedIntro: 'yes',
            showMaskGradient: 'no',
            slideShowPlayDelay: 4000,
            slideShowAutoPlay: 'no',
            pageSidesColor: '#ffffff',
            pageBackSideColor: '#666666',
            directionalLightColor: '#ffffff',
            directionalLightIntensity: 0.05,
            ambientLightColor: '#ffffff',
            ambientLightIntensity: 3.33,
            lightboxCloseButtonWidth: 30,
            lightboxCloseButtonHeight: 30,
            lightboxBackgroundColor: 'rgba(0, 0, 0, .7)',
            
            // Controller.
            buttons: 'pages, content, zoomout, zoomin, play, pagesSelector, share, print, sound, fullscreen',
            buttonsToolTips: 'Pages, Show table of content/Hide table of content, Zoom Out, Zoom In, Play/Pause, Pages Selector, Share, Print, Sound Off/Sound On, Full Screen/Normal Screen',
            showButtonsLabels: 'yes',
            showBlockTouchButton: 'yes',
            blockTouchButtonSize: 40,
            hideControllerDelay: 3,
            startAndEndButtonsHorizontalGap: 22,
            startAndEndButtonsVerticalGap: 5,
            spaceBetweenButtons: 9,
            controllerOffsetY: 24,
            buttonsToolTipOffsetY: 6,
            buttonsIconNormalColor: '#888888',
            buttonsIconSelectedColor: '#7FDC23',
            buttonToolTipBackgroundColor: "#ffffff",
            buttonToolTipTextColor: "#000000",
            controllerBackgrondColor: 'rgba(25,25,25, .6)',
            showNextAndPrevButtonsOnMobile: 'no',
            showNextAndPrevButtons: 'yes',
            nextAndPrevButtonsOffsetX: 10,
            nextAndPrevButtonSize: 56,
       
            // Pages
            pagesBackgroundColor: 'rgba(0,0,0,0.5)',
            pageNumbersBackgroundColor: 'rgba(0,0,0,0.5)',
            pageNumbersFontColor: '#FFFFFF',
            pageImageHeight: 272,

            // Table of content.
            tableOfContentText: 'Table of content',
            tableOfContentPosition: 'left',
            tableOfContentTextColor: '#FFFFFF',
            tableOfContentWidth: 300,
            tableOfContentTextNormalColor: '#888888',
            tableOfContentTextSelectedColor: '#7FDC23',
            tableOfContentBackgroundColor: '#212020',
            
            // Share.
            shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
            shareBackgroundColor:"#212020",
            shareText:"Share via",
            shareTextColor: '#FFFFFF',
            shareLineSeparatorColor: '#3A3A3A',

            // Camera amd model initial position.
            bookClosedPosition: 'x:0.18753981923273286, y:0.052761741981438286, z:1.1840798177425504, tx:0, ty:0, tz:0',
            bookOpenedPosition: 'x:-0.007973569106777668, y:-0.287465292030908, z:1.3673237491972872, tx:0, ty:0, tz:0',
            showCameraTool: 'no',
            
            // Orbital controls.
            enableOrbitalControls: 'yes',
            zoomFactor: 0.2,
            zoomSpeed: .8,
            dampingFactor: 1,
            autoRotate: 'no',
            autoRotateSpeed: 1.2,
            screenSpacePanning: 'yes',
            enablePan: 'yes',
            enableZoom: 'yes',
            enableKeboardPan: 'yes',
            keysType: 'asdw', // arrows/asdw
            panSpeed: 1,
            keyPanSpeed: 1,
            zoomMinDistance: 0.37,
            zoomMaxDistance: 3.47,
            horizontalRotationMaxAngle: 0,
            horizontalRotationMinAngle: 0,
            verticalRotationMinAngle: 0,
            verticalRotationMaxAngle: 180,

            // Post processing.
            antialias: 'yes',
            waveFrequency: 0,
            waveAmplitude: 0,
            waveRgbShiftStrength: 0,
            glitch: 'no',
            grid: 'no',
            gridAddRGBDistortion: 'yes',
            gridSize: 400,
            gridMouseRadiusFactor: 0.1,
            gridMouseStrengthFactor: 0.48,
            gridMouseRelaxation: 0.9,
            afterImage: 'no',
            afterImageDumping: 0.9,

		});
		
	}
</script>

The last step adding the flip book is to create a div with an unique ID that will act as the parent/holder for the flip book and set the parentId option to point to the div id ex: parentId: 'myDiv', this div can be added anywhere in your page.

<!-- Flip book holder. --> 
<div id="myDiv"></div>

To add multiple flip books just redo the steps explained above and make sure to change the instance to fwdufb1, fwdufb2, fwdufb3, etc... depending on how many flip books are added, also change the parentId to a different ID and if you want add a different book book gallery by also change the bookDataId to point to a different book book gallery.

Please read the settings section to understand the flip book configuration options.

Setup book book gallery

A book book gallery is created by adding in the page inside the body a div with an unique ID and setting the display style to none, this will be used only as the book book gallery data markup, This unique ID has to be added as the value of the bookDataId option in the flip book settings like this bookDataId: 'bookData'.

<!-- Flip book book book gallery. -->
<div id="bookData" style="display: none;">

<div data-src="media/textures/VMEN/book-cover.png" data-cover data-table-of-content="VMEN Frot Cover"></div> 
	
<div data-src="media/textures/VMEN/book-back.png" data-back data-table-of-content="VMEN End Cover"></div> 

<div data-src="media/textures/VMEN/2.png" data-table-of-content="Jhon Joseph Holt"></div> 

<div data-src="media/textures/VMEN/3.png" data-table-of-content="Jhon Joseph Holt 2"></div> 

<div data-src="media/textures/VMEN/4.png" data-table-of-content="Lady With Glasses"></div> 

<div data-src="media/textures/VMEN/5.png" data-table-of-content="Casa Blanca"></div> 

<div data-src="media/textures/VMEN/6.png" data-table-of-content="Adventures awaits"></div> 

... etc add as many pages as you want jsut make sure you add pais...

</div>

Adding book book gallery items is done by adding inside the book book gallery div one or more div's with data paremeters expplained below.

book book gallery item parameters

data-src - required media path (.jpg, .jpeg, .png, .webp).
data-cover - the front cover, this is required.
data-back - the back cover, this is required.
data-table-of-content - the text for the table of content for the page, this is optional you can add it to one, more or no page.

Modify code

UFB is using VITE to build the built final Javascript file.

Settings

3D Flip Book has many options that allows to customize it's features. They are added directly in the flip book constructor as it can be seen in the installation section.

Example

<script type="text/javascript">
	if(document.readyState == 'complete'){
		fwdSetupUFB();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdSetupUFB();
		});
	}

	function fwdSetupUFB(){
		new FWDUFB({ 

			// Main settings.  
			instance: 'fwdufb0',
			displayType: 'responsive',
			parentId: 'myDiv',
			bookDataId: 'bookData',
			initializeWhenVisible: 'yes',
			etc...
			
		})
	}
</script>

instance

Type: (String) - default: unset

The flip book instance name, this is used to call the API. In the examples files the instance name is set to fwdufb0, if you are using multiple flip books instances just change the instance to fwdufb1, fwdufb2, fwdufb3, etc...

parentId

Type: (String) - default: unset

The flip book holder/div ID, please make sure that this has an unique ID, it can be added anywhere in your page.

bookDataId

Type: (String) - default: unset

The book book gallery data div ID, please read the book book gallery section for more info.

displayType

Type: (String) - default: responsive

Flip book display type.

responsive - displays the flip book in responsive type based on the maxWidth and maxHeight settings.
afterparent - displays the flip book based on the parent width and height.
lightbox - displays the flip book in a lightbox window.

initializeWhenVisible

Type: (String) - default: yes

This can be yes or no, lazy scrolling / loading, the posibility to initialize UFB on scroll when the product is visible in the page, this way for example if the product is in a section of a page that is not visible it will not be initialized, instead UFB will be initalized only when the user is scrolling to that section in which UFB is added.

maxWidth

Type: (Number) - default: 1920

The flip book maximum width in px.

startResizingWidth

Type: (Number) - default: 1200

The flip book width (in pixels) at which the book container will begin adjusting its width and height. This setting only takes effect if autoscale is enabled.

maxHeight

Type: (Number) - default: 800

The flip book maximum height in px.

stopScrollingForPx

Type: (Number) - default: 0

Adds artificial scrolling (in pixels) to keep the flip book visible in the viewport for a longer duration.

paralax

Type: (String) - default: no

This can be yes or no, ads paralax on scroll.

autoScale

Type: (String) - default: yes

This can be yes or no and applies if the displayType is reponsive. If set to yes this flip book height will always be proportional to the flip book width, if set to no the height will be fixed based on the maxHeight property.

centerOpenPages

Type: (String) - default: no

This can be yes or no Center the page when the book is opened.

centerOpenPagesOnSmallScreens

Type: (Number) - default: 650

Force the book to be centerd when the page is opened if the book viewport width is smaller than this feature.

stats

Type: (String) - default: yes

This can be yes or no, show the stats, FSP/memory usage.

gui

Type: (String) - default: yes

This can be yes or no, show the GUI live settings.

roughnessTextureSrc

Type: (String) - default: 'content/ccc.png'

This roughness texture surce. Optional roughness texture for the cover and back. This adds a subtle surface detail—like a logo—that interacts with light, creating realistic reflections and depth.

loadingPageTextureSrc

Type: (String) - default: 'content/book-cover-roughness.jpg'

This texture will appear on pages until the page texture is loaded and dislayed, keep this as small as possible.

envMapSource

Type: String — Default: 'content/studio_small_09_1k.exr'

An optional environment map used to add realistic lighting and reflections to the book.

envMapIntensity

Type: Number — Default: 0.1

Environment map intensity, a nuber from 0 to 1.

showPreloader

Type: (String) - default: yes

This can be yes or no, show the preloader.

preloaderColor

Type: (String) - default: #FFFFFF

The preloader color in HEX or RGB.

backgroundColor

Type: (String) - default: rgba(0, 0, 0, 1)

The main background color in HEX or RGBA.

fullscreenBackgroundColor

Type: (String) - default: rgba(0, 0, 0, 1)

The background color when the flip book is full screen.

useAudio

Type: (String) - default: yes

This can be yes or no, enable audio effects.

pageRatio

Type: (Number) - default: 0.76

The pages ratio, 1 is a perfect square.

pageDepth

Type: (Number) - default: 1

The page depth/thickness, possible values are 1,2 or 3.

startAtPage

Type: (Number) - default: 0

When the page is first displayed you can choose to flip the book at a specific page, the counting starts from 0.

showMaskGradient

Type: (String) - default: yes

This can be yes or no, show a top and bottom gradient overlay.

slideShowPlayDelay

Type: (Number) - default: 4000

The page slide show in milliseconds.

slideShowAutoPlay

Type: (String) - default: no

This can be yes or no, enable page slide show.

pageSidesColor

Type: (String) - default: #888888

The pages side color.

pageBackSideColor

Type: (String) - default: #666666

The pages back side color.

directionalLightColor

Type: (String) - default: #ffffff

Directional light color.

directionalLightIntensity

Type: (Number) - default: 0.05

Directional light intensity.

ambientLightColor

Type: (String) - default: #ffffff

Ambient light color.

ambientLightIntensity

Type: (Number) - default: 3.33

Ambient light intensity.

lightboxCloseButtonWidth

Type: (Number) - default: 30

Lightbox close button width.

lightboxBackgroundColor

Type: (Number) - default: rgba(0, 0, 0, .7)

Lightbox background color.

buttons

Type: (String) - default: 'pages, content, zoomout, zoomin, play, pagesSelector, share, print, sound, fullscreen'

This option represents the buttons from the controls bar, they are separated by ",". The buttons are displayed in the order in which they are listed here so you can switch the order of the buttons by modifying the list order. If you don't need a button just remove it from the list, for example to display only the fullscreen and info buttons set this option like this: buttons:"play, fullscreen".

buttonsToolTips

Type: (String) - default: 'Pages, Show table of content/Hide table of content, Zoom Out, Zoom In, Play/Pause, Pages Selector, Share, Print, Sound Off/Sound On, Full Screen/Normal Screen'

This option represents the controls bar tooltips they are separated by ",". Each tooltip is related to a button so the order of tooltips must be the same with the order of buttons from the buttons option explained above, there are some buttons which requires two tootltip states like the fullscreen button, in this case the tooltip string is separated by "/" for example the fullscreen tooltip is formatted like this: "Full screen/Normal screen". If you don't want to use the tooltips leave this option blank like this: buttonsToolTips:''or set showButtonsLabels to 'no'.

showBlockTouchButton

Type: (String) - default: no

This can be yes or no, show the block touch input button when the viewer is running on a mobile device like Iphone.

showButtonsLabels

Type: (String) - default: yes

This can be yes or no, show the buttons tooltips/labels.

blockTouchButtonSize

Type: (Number) - default: 40

The block touch input button width and height in px.

hideControllerDelay

Type: (Number) - default: 3

The delay in seconds until the controls buttons will hide after a period of inactivity.

startAndEndButtonsHorizontalGap

Type: (Number) - default: 22

The controls buttons start and end horizontal gap in px.

startAndEndButtonsVerticalGap

Type: (Number) - default: 22

The controls buttons start and end vertical gap in px.

spaceBetweenButtons

Type: (Number) - default: 9

The controls space between buttons.

controllerOffsetY

Type: (Number) - default: 24

The controls buttons gap bettween the bottom part of the buttons controler and the viewer bottom part in px.

buttonsToolTipOffsetY

Type: (Number) - default: 6

The gap between the controls buttons and tooltip in px.

buttonsIconNormalColor

Type: (String) - default: #FFFFFF

The controls buttons icon normal color, it can be HEX, RGB or RGBA.

buttonsIconSelectedColor

Type: (String) - default: #d6d6d6

The controls buttons icon selected color, it can be HEX, RGB or RGBA.

buttonToolTipBackgroundColor

Type: (String) - default: #FF0000

The controls buttons tooltip background color, it can be HEX, RGB or RGBA.

buttonToolTipTextColor

Type: (String) - default: #000000

The controls buttons tooltip text color, it can be HEX, RGB or RGBA.

controllerBackgrondColor

Type: (String) - default: rgba(0, 0, 0, 0.4)

The controls buttons background color, it can be HEX, RGB or RGBA.

showNextAndPrevButtons

Type: (String) - default: yes

This can be yes or no, show the next and prev buttons.

showNextAndPrevButtonsOnMobile

Type: (String) - default: yes

This can be yes or no, show the next and prev buttons on mobile devices.

nextAndPrevButtonsOffsetX

Type: (Number) - default: 10

Next and prev buttons horizontal offset/gap in px.

nextAndPrevButtonSize

Type: (Number) - default: 56

Next and prev buttons size in px.

pagesBackgroundColor

Type: (String) - default: rgba(0,0,0,0.5)

Pages window background color.

pageNumbersBackgroundColor

Type: (String) - default: rgba(0,0,0,0.5)

Pages window numbers/counting background color.

pageNumbersFontColor

Type: (String) - default: #FFFFFF

Pages window numbers/counting text color.

pageImageHeight

Type: (Number) - default: 272

Pages images height.

tableOfContentText

Type: (String) - default: Table of content

Table of content text.

tableOfContentPosition

Type: (String) - default: left

This can be left or right, the table of content positon.

tableOfContentTextColor

Type: (String) - default: #FFFFFF

Table of content text color.

tableOfContentWidth

Type: (Number) - default: 300

Table of content window width in px.

tableOfContentTextNormalColor

Type: (String) - default: #888888

Table of content text normal color.

tableOfContentTextSelectedColor

Type: (String) - default: #7FDC23

Table of content text selected color.

tableOfContentBackgroundColor

Type: (String) - default: #212020

Table of content background color.

tableOfContentBackgroundColor

Type: (String) - default: #212020

Table of content background color.

shareButtons

Type: (Array) - default: ['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger']

Share button and share buttons window. Set the order as you want and remove the ones that you don't need. If you don't want to use the share button leave this option empty shareButtons:[] or remove it completely.

shareBackgroundColor

Type: (String) - default: #191919

Share window background color.

shareText

Type: (String) - default: Share via

Share window header text.

shareTextColor

Type: (String) - default: #FFFFFF

Share header text color.

shareLineSeparatorColor

Type: (String) - default: #3A3A3A

Share header line separator.

bookClosedPosition

Type: (String) - default: x:0.3421937210219763, y:-0.12412336333326596, z:1.0853579363276826, tx:-0.0013309199456557762, ty:-0.02473064024348124, tz:-0.04742472114098786

The camera postion when the book is closed, to get the camera position, set showCameraTool to yes. Then, rotate and position the book as desired. Once you're happy with the view, click anywhere on the page — the camera position will be copied to your clipboard. You can then paste it wherever needed.

bookOpenedPosition

Type: (String) - default: x:0.3421937210219763, y:-0.12412336333326596, z:1.0853579363276826, tx:-0.0013309199456557762, ty:-0.02473064024348124, tz:-0.04742472114098786

The camera postion when the book is opened, to get the camera position, set showCameraTool to yes. Then, rotate and position the book as desired. Once you're happy with the view, click anywhere on the page — the camera position will be copied to your clipboard. You can then paste it wherever needed.

showCameraTool

Type: (String) - default: no

Enable the camera position tool.

enableOrbitalControls

Type: (String) - default: no

This can be yes or no, enable the orbital controls... zoom and pan.

zoomFactor

Type: (Number) - default: .1

A number from 0 to 1, where a higher value corresponds to increased zoom intensity or magnification when the flip book undergoes zooming.

zoomSpeed

Type: (Number) - default: .25

A number from 0 to 1, the zoom animation tween in seconds.

dampingFactor

Type: (Number) - default: .1

A number from 0 to 1, the pan damping inertia when the flip book is rotated.

autoRotate

Type: (String) - default: no

This can be yes or no, enable the orbital controls autorotation.

autoRotateSpeed

Type: (Number) - default: .25

A number from 0 to 100, the autorotation speed, the higher the number the faster the flip book will autorotate.

screenSpacePanning

Type: (String) - default: yes

This can be yes or no, defines how the camera's position is translated when panning. If yes, the camera pans in screen spacem otherwise, the camera pans in the plane orthogonal to the camera's up direction.

enablePan

Type: (String) - default: yes

This can be yes or no, enable right click pan or tap with two fingers on mobile pan.

enableZoom

Type: (String) - default: yes

This can be yes or no, enable zoom.

enableKeboardPan

Type: (String) - default: yes

This can be yes or no, enable keyboard pan.

keysType

Type: (String) - default: asdw

This can be asdw or arrows, set the keys to pan.

panSpeed

Type: (Number) - default: 1

A number from 0 to 3, the right click pan speed factor.

keyPanSpeed

Type: (Number) - default: 1

A number from 0 to 3, the keyboard pan speed factor.

zoomMinDistance

Type: (Number) - default: 0.07

A number from 0 to 3, The minimum distance the camera can be from the target (orbit center) when using orbital controls, ensuring the camera does not get too close to the target during user interaction.

zoomMaxDistance

Type: (Number) - default: 1.5

A number from 0 to 3, the maximum distance the camera can be from the target (orbit center) when using orbital controls, ensuring the camera does not get too close to the target during user interaction.

horizontalRotationMaxAngle

Type: (Number) - default: 0

A number from 0 to -180 angle in degree, restricts the maximum azimuthal rotation angle (horizontal rotation) of the camera when using controls, preventing it from exceeding a specified limit.

horizontalRotationMinAngle

Type: (Number) - default: 0

A number from 0 to 180 angle in degree, restricts the minimum azimuthal rotation angle (horizontal rotation) of the camera when using controls, preventing it from exceeding a specified limit.

verticalRotationMinAngle

Type: (Number) - default: 0

A number from 0 to 180 angle in degree, how far you can orbit vertically, lower limit.

verticalRotationMaxAngle

Type: (Number) - default: 0

A number from 0 to 180 angle in degree, how far you can orbit vertically, higher limit.

antialias

Type: (String) - default: yes

This can be yes or no, enable post-processing anitialias for smoother visual experience.

uwaveFrequency

Type: (Number) - default: 0.1

Wave frequency.

waveAmplitude

Type: (Number) - default: 0.02

Wave amplitude.

waveRgbShiftStrength

Type: (Number) - default: 0

Wave RGB color shift.

glitch

Type: (String) - default: no

This can be yes or no, enable glitch post-processing effect.

grid

Type: (String) - default: no

This can be yes or no, enable grid post-porcessing effect.

gridAddRGBDistortion

Type: (String) - default: no

This can be yes or no, enable grid post-porcessing RGB shigt effect.

gridSize

Type: (Number) - default: 400

The grid post-processing grid size.

gridMouseRadiusFactor

Type: (Number) - default: 0.2

The grid post-processing grid radius size.

gridMouseStrengthFactor

Type: (Number) - default: 0.48

The grid post-processing grid strength factor.

gridMouseRelaxation

Type: (Number) - default: 0.9

The grid post-processing grid relaxation factor.

afterImage

Type: (String) - default: no

This can be yes or no, enable after-image post-porcessing effect.

afterImageDumping

Type: (Number) - default: 0.75

The after-image post-processing strength factor.

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdufb0.methodName( /* arguments */ ), please note that fwdufb0 is the flip book instance name, if you are using multiple flip books don't forget to set the instance unique for each instance like this fwdufb1, fwdufb2, fwdufb3, etc... depending on how many flip books are added.

goToPage

.goToPage(pageId:Number)

Go to a specific page, the couting starts from 0.

destory

.destory()

Destroy the instance and removes it from the DOM.

Events

3D Flip Book has many events, they are added via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

// API.let fwdufbAPI = setInterval(() =>{
if(window['fwdufb0']){
	console.log('SC API ready')
	clearInterval(fwdufbAPI);

	// Register the LIKE event.
	fwdufb0.addEventListener(FWDUFB.PAGE_CHANGED, onPageChanged);
}
}, 100);


// Listen for the LIKE event.
function onPageChanged(e){
	//console.log(e)
}

FWDUFB.FULL_SCREEN

Dispatched when the book goes fullscreen.

FWDUFB.NORMAL_SCREEN

Dispatched when the book goes fullscreen.

FWDUFB.PLAY

Dispatched when the slideshow starts.

FWDUFB.PAGE_CHANGED

Dispatched when the pages are changing, there is an event associated with it tht contains data about the current page like the id and more.

FWDUFB.ERROR

Dispatched when an error occurs with the flip book like not finding the media.

Notes

I've dreamt of bringing this vision to life since I first started developing in the 2000s. For nearly 25 years, this idea has lived in my mind—waiting for the right moment, the right tools, and the right technology. And now, at last, it's possible!

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.

JavaScript Documentation

Getting Started

Installation

Setup book book gallery

book book gallery item parameters

Modify code

Settings

Example

instance

parentId

bookDataId

displayType

initializeWhenVisible

maxWidth

startResizingWidth

maxHeight

stopScrollingForPx

paralax

autoScale

centerOpenPages

centerOpenPagesOnSmallScreens

stats

gui

roughnessTextureSrc

loadingPageTextureSrc

envMapSource

envMapIntensity

showPreloader

preloaderColor

backgroundColor

fullscreenBackgroundColor

useAudio

pageRatio

pageDepth

startAtPage

showMaskGradient

slideShowPlayDelay

slideShowAutoPlay

pageSidesColor

pageBackSideColor

directionalLightColor

directionalLightIntensity

ambientLightColor

ambientLightIntensity

lightboxCloseButtonWidth

lightboxBackgroundColor

buttons

buttonsToolTips

showBlockTouchButton

showButtonsLabels

blockTouchButtonSize

hideControllerDelay

startAndEndButtonsHorizontalGap

startAndEndButtonsVerticalGap

spaceBetweenButtons

controllerOffsetY

buttonsToolTipOffsetY

buttonsIconNormalColor

buttonsIconSelectedColor

buttonToolTipBackgroundColor

buttonToolTipTextColor

controllerBackgrondColor

showNextAndPrevButtons

showNextAndPrevButtonsOnMobile

nextAndPrevButtonsOffsetX

nextAndPrevButtonSize

pagesBackgroundColor

pageNumbersBackgroundColor

pageNumbersFontColor

pageImageHeight

tableOfContentText

tableOfContentPosition

tableOfContentTextColor

tableOfContentWidth

tableOfContentTextNormalColor

tableOfContentTextSelectedColor

tableOfContentBackgroundColor

tableOfContentBackgroundColor

shareButtons

shareBackgroundColor