zinejs Flipbook

zinejs Flipbook embeds a fast, GPU-accelerated page-flip reader in your posts and pages. Point it at a PDF from your Media Library and readers can flip, zoom, and page through it like a real book. A CSS fallback keeps it working on devices without WebGL.

Ways to add a flipbook:

• The Zine PDF Flipbook block: pick a PDF and set options in the editor.
• The Zine Image Flipbook block: pick a set of images.
• The [zinejs] shortcode: for the Classic editor, theme templates, and page builders.

The engine and pdf.js are bundled with the plugin, and the scripts are enqueued only on pages that actually contain a flipbook.

Shortcode

[zinejs pdf="https://example.com/brochure.pdf" spread="cover" curl="silk" controls-position="top"]

The shortcode accepts the same options as the blocks. Source: pdf (URL) or images (comma-separated URLs). Layout: spread (cover | double | single | book), direction (ltr | rtl), fit (contain | fill), gutter-overlap (auto, or a percent of page width such as 2), responsive (true | false), threshold (px), max-width (px), aspect (e.g. 3/2, or auto). Interaction: click-to-flip (edge | half | off), curl (cone | simple | roll | leaf | flick | silk), flip-duration (ms), start-page (0-based). Zoom: zoom (true | false), zoom-max, zoom-wheel, zoom-double-click. Controls: controls (true | false), controls-position (top | bottom | left | right), controls-scheme (auto | light | dark), controls-arrows, context-menu, loading, hints, deep-link. Permissions: allow-download, allow-print, allow-share. Covers: front-cover (URL), back-cover (URL). Sound: sound (true | false), sound-volume (0..1), sound-muted, sound-persist.

By default the book drops to one page per spread when its container is narrower than 500px (threshold), so it stays readable on phones and in narrow theme columns. If your column is narrow but you still want two-page spreads (for example in cover mode), set responsive="false", or use the block’s Wide/Full alignment to give it more room.

License

This plugin is free and open source, licensed under the GNU GPL v2 or later. The zinejs engine it bundles is distributed here under the same GPL license, and its source is available at https://github.com/awecode/zinejs (the engine is dual-licensed; other editions exist at https://zinejs.com). Bundled pdf.js is licensed under Apache-2.0; its source is at https://github.com/mozilla/pdf.js.

The plugin’s own code is unminified and readable. The bundled assets/vendor/* files are built from the sources above; see the repository for the build steps.

1. Upload the zinejs-flipbook folder to /wp-content/plugins/, or install the plugin through the Plugins screen in WordPress.
2. Activate it through the Plugins screen.
3. Add a “Zine Flipbook” block to a post or page, or use the [zinejs] shortcode.

1. 

   A two-page PDF spread rendered by the PDF Flipbook block.

2. 

   An image flipbook with the built-in reader toolbar.

1.1.1

• Fix: PDF images in JPEG 2000 or JBIG2 format (common in newspaper and magazine PDFs) now render instead of showing blank. pdf.js’s image decoders, CJK character maps, standard fonts and colour profiles are now bundled, so nothing loads from a CDN.
• Bundles zinejs engine 1.0.1.

1.1.0

• New “Print gutter overlap” option (block and gutter-overlap shortcode attribute): hides artwork a print PDF repeats on both sides of the spine. Auto finds it per spread, or set a fixed percent.
• Bundles zinejs engine 1.0.0.

1.0.0

• Two blocks (PDF and Images) plus the [zinejs] shortcode, with the full zinejs option set.