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.

Manuals (Thumbs-stretch)​

CSS BookGLFW manualBrand Manual TemplateLifeStyle MagazineMazda 6

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)​

Image FlipbookMazda 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 BookGLFW manualBrand Manual TemplateLifeStyle Magazine

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.

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.
  • <img class="alignnone wp-image-2118 size-full" src="https://jquery.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://jquery.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.
Get jQuery Flipbook Plugin