Flipbook Lightbox, Popups and customization with dFlip

by

dFlip uses WebGL and PDF.js as 3D  and PDF rendering frameworks. Both of these frameworks have complex architecture and require crucial memory management, or the memory leaks will quickly escalate and crashes will occur.

dFlip has its own inbuilt lightbox solution that you can use with thumb, buttons or custom elements. dFlip handles the memory management through lightboxes when multiple flipbooks are created and disposed of, one after another. Any leftover memory can result in out of memory errors and hence page crash.

There are some cases where dFlip inbuilt lightboxes may not be the solution customer seek and use custom solutions like BootStrap Modals, Foundation Reveal Framework and so on. But there certain events that need to properly executed for seamless integration.

Resize Event – Flipbook is small and resizes only when the browser resizes!

Majority of issues comes from resizing event that the flipbook won’t detect when the custom modal boxes are shown and their dimensions are changed. When flipbook is created it takes the sizing from the parent element where the flipbook is added. In this case, modal boxes. Modal boxes are hidden initially so they have 0 height and width, thus flipbook will also be at a minimum size. But when modal popup is open, modals take its viewable size but the flipbook won’t detect any changes and stays at the same smaller size.

There are two approaches that can be useful in such a scenario.

  1. Create the flipbook only after the popup is triggered. This is the approach dFlip internal lightbox takes. When the lightbox is called, it initializes itself, then creates the flipbook in the lightbox body, thus the flipbook takes the actual size from the lightbox. This is possible in jQuery solution but not feasible in the WordPress environment.
  2. Update the flipbook after the popup is triggered. This is a possible solution when the flipbook is already created and is inside the popup and cannet be create after the popup is displayed. Here you can trigger df_123.resize() after the popup is displayed with the popup callback function, if available. The solution used by some of the clients.

Leave a Comment