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.

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

After purchasing the plugin from CodeCanyon, inside the main zip file you will find installable plugin fwdufb.zip.

Installation steps

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdufb.zip plugin file that you downloaded from CodeCanyon.
3. Click on install now.
4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings or books, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Usage

The plugin is constructed of three sections, the preset manager which is used to modify the carousel functionality and ads access to the preset from the demos, the book manager wich is used to create books and add manage items and the CSS editor which is used to update surten CSS aspects of the plugin like the carousel font.

Presets

Frist step is to select the preset that you want to use, there are six presets all fo them have default values like the page in the demo page here. don't forget to update the preset.

Books

Next step is to create your own book by clicking on the Add new book button and give it a name.

After this is done you can add as many items as you want, it is a simple process.

Shortcode

After the preset and book are done use the shortcode generator to add the carousel in your page, post or custom post.

To open in lightbox used the code below and set the display type to lightbox, please note that in WooCommerce the default product gallery will be removed with the lightbox mode.

<script type="text/javascript">

	// Open lightbox.
	function openLightbox(){
		fwdufbSetupFlipBook0();
	}

	// Open lightbo automatically.
	setTimeout(() => {
		openLightbox();
	}, 100);
			
</script>

WooCommerce

Just add the shortcode in the product page, it will replace the WooCommerce native gallery.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the carousel externally.

You can access the carousel instances by their order in the page with the fwdufb name with its order after it, starting from 0. For example if you have 2 instances their names are fwdufb0 and fwdufb1. Here is an example how to use the API in the WordPress editor or in a code section of your page:

<script type="text/javascript">

	// API.
	let fwdufbAPI = setInterval(() =>{
	if(window['fwdufb0']){
		console.log('UFB 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)
	}
		
</script>

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 carousel instance name, if you are using multiple players don't forget to set the instance unique for each instance like this fwdufb1, fwdufb2, fwdufb3, etc... depending on how many players 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 a single event, it is used via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

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.

WordPress & WooCommerce Documentation