[lwptoc]

dFlip utilizes WebGL and PDF.js as its 3D and PDF rendering frameworks. Both of these technologies have complex architectures that require careful memory management to prevent memory leaks and potential page crashes.

To handle this efficiently, dFlip includes its own built-in lightbox feature, which can be triggered using thumbnails, buttons, or custom elements. This system ensures smooth creation and disposal of multiple flipbooks, managing memory effectively and preventing out-of-memory errors.

In some cases, users may prefer custom lightbox solutions like Bootstrap Modals or Foundation Reveal Framework. However, it’s essential to properly execute specific events and integration steps to ensure smooth performance and compatibility with dFlip.

Resize Event – Flipbook Appears Small and Resizes Only When the Browser Resizes

A common issue users face with dFlip occurs when the flipbook doesn’t automatically resize after a modal or popup is displayed. This happens because the flipbook takes its dimensions from its parent element (usually a modal box) when it is first created.

Since modal boxes are hidden initially, they have zero height and width, causing the flipbook to render at a minimal size. When the modal is later opened and becomes visible, the flipbook doesn’t detect the new dimensions and therefore remains small.

To fix this issue, there are two effective approaches you can use:

  1. Create the flipbook only after the popup is triggered: This method is used by dFlip’s built-in lightbox feature. When the lightbox is activated, it first initializes itself and then creates the flipbook inside its body. As a result, the flipbook automatically adapts to the actual lightbox dimensions.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.