Lightbox (popup) flipbook examples

DearFlip, also known as dFlip, offers a versatile solution for displaying flipbooks through popup boxes, commonly referred to as lightboxes. Lightboxes provide an efficient and user-friendly way to present multiple flipbooks on the same page without compromising the page’s performance.

When using dFlip in lightboxes, users can click on thumbnails or links to open various flipbook examples in a popup window. This method helps to maintain fast load times and reduces memory consumption, as the flipbooks are loaded dynamically only when the user chooses to view them. Below, you can find thumbnails and links showcasing different flipbooks. Clicking any of these will open the respective flipbook in a lightbox.

Lightboxes are particularly recommended for pages that need to display multiple flipbooks. Depending on your requirements, these flipbooks can be organized within a table structure for a more streamlined appearance or simply as book cover thumbnails for a visually appealing layout. This approach ensures that the main content of the page remains quick and responsive, while still providing convenient access to numerous flipbooks.

Manuals (Thumbs-stretch)​

CSS BookGLFW manualBrand Manual TemplateLifeStyle MagazineMazda 6

DIV mode is ideal for use when the cover page images are all the same size and aspect ratio. This mode stretches images to fit a specified size, which can lead to distortion if the images differ in dimensions. Therefore, it’s important to ensure that the cover images are uniform in size to maintain their intended appearance.


Catalogues (thumbs autofit – PRO)​

Image FlipbookMazda 6Mazda CX-9Mazda 3H9 Catalogue

Thumb mode is perfect for situations where the cover page images vary in size and aspect ratio. In this mode, the cover page will automatically adjust to the most suitable image ratio to avoid distortion or stretching. This approach is recommended over the Thumbs stretch mode for maintaining the integrity of the images.


Right to Left (RTL)​

H9 Catalogue

Some languages are read from right to left. By setting the Reading direction to RTL, the 3D flipbook will be displayed in a right-to-left (RTL) layout.


Buttons​ (PRO)

CSS BookGLFW manualBrand Manual TemplateLifeStyle Magazine

3D Flipbooks can also be launched in popups using regular buttons. This method is particularly useful when the page layout is not conducive to Embed mode or Thumb mode. Popups save valuable screen space by only displaying the flipbook when the user clicks on the corresponding button. Additionally, this approach offers a high level of customization through custom CSS, allowing you to tailor the appearance and behavior of both the button and the popup to match your website’s aesthetic and functional requirements. This makes it an adaptable solution for seamlessly integrating flipbooks into a variety of layouts without compromising on design or user experience.


More Examples:​

  • PDF Flipbook with links and bookmarks: PDF files are handled really well by the plugin. All your links and bookmarks are automatically detected and displayed.
  • Open Flipbook with Link: You can create a link to open the flipbook in the same page. These Links here all open a flipbook with respective feature.
  • Open Book at certain page: Just add data-page="4" to the HTML syntax and the flipbook will open at that certain page.
  • DearFlip Icon Anything to open the flipbook: You can actually add any design content button inside the dflip shortcode and that will also trigger the flipbook.
  • DearFlip Icon Custom button: Buttons are great to open flipbook. And they too support any content or custom class from your theme.