Lightbox (popup) flipbook examples

DearFlip, or dFlip, can be used in popup boxes, also known as lightboxes. You can click on the below thumbnails and links to see various flipbook examples on the same page. Light-boxes are recommended when there are multiple books to be displayed in a page. It can be inside a table structure or just book cover thumbnails depending on your need.

Thumb Lightboxes

CSS BookTest dFlip Manual BookGLFW manualBrand Manual TemplateMazda 6Meat Atlas

This mode, DIV mode, is suitable when the cover page images are available in same size and ratio. mode stretches the image to a certain size and the image can look distorted – thus same size of cover images should be used.


Catalogues (thumbs autofit – PRO)​

Mazda 6Mazda CX-9Mazda 3H9 Catalogue

This Thumb mode is suitable when the cover page images are not available in same size and ratio. The cover page will try to adjust to the best possible image ratio so that the image is not distorted or stretched. This method is recommended against the Thumbs stretch mode.


Right to Left (RTL)​

H9 Catalogue

Some languages require flipbooks to be read from right to Left. By setting the Reading direction to RTL, the 3D flipbook will now be available in RTL layout.


Buttons​ (PRO)

CSS BookTest dFlip Manual BookGLFW manualBrand Manual Template

3D Flipbooks can be launched in popups using normal buttons too. These are suitable when the layout is not suitable for Embed mode or thumb mode. It takes less space is customizable using custom CSS.


  • 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 wordpress shortcode or HTML syntax and the flipbook will open at that certain page.
  • <img class="alignnone wp-image-2118 size-full" src="https://wordpress.dearflip.com/wp-content/uploads/2020/09/dflip-icon-128-e1599788874816.png" alt="DearFlip Icon" width="48" height="48" /> Anything to open the flipbook: You can actually add any design content button inside the dflip shortcode and that will also trigger the flipbook.
  • <img class="alignnone wp-image-2118 size-full" src="https://wordpress.dearflip.com/wp-content/uploads/2020/09/dflip-icon-128-e1599788874816.png" alt="DearFlip Icon" width="48" height="48" /> Custom button: Buttons are great to open flipbook. And they too support any content or custom class from your theme.


This is the easiest solution that doesn’t even require creating a DearFlip post. just include the link to your pdf file in the content and it will be autodetected, converted into a popup viewer. The type of viewer, and settings are taken from Global settings(Pro feature).

DIrectly Linked file

This is disabled by default and needs to be enabled in Global Settings-> Advanced-> Auto convert PDF links on page to viewers

PDF file links feature will not work in links set to open in new tab or links set as download – even when the feature is enabled.