Flipbook Component Test

Testing both single-cover and double-cover flipbooks on the same page

Single Cover Flipbook

How it works:

Desktop: Starts with cover page alone on the right (with blank page on left), then shows 2 pages side-by-side
Mobile: Shows 1 page at a time

Single Cover Example

Double Cover Flipbook

How it works:

Desktop: Starts with 2-page cover spread, then continues with 2 pages side-by-side
Mobile: Shows 1 page at a time

Double Cover Example

Multiple Flipbooks Test

Testing that multiple flipbooks can coexist on the same page without interfering with each other.

First Single Cover

First Double Cover

Second Single Cover

Usage Instructions

Single Cover Flipbook

---
import FlipBookSingleCover from '~/components/widgets/FlipBookSingleCover.astro';

const images = [
  '/path/to/cover.jpg',
  '/path/to/page2.jpg',
  '/path/to/page3.jpg',
  // ... more pages
];
---

<FlipBookSingleCover
  images={images}
  title="My Flipbook Title"
  height={600}
  id="unique-id-1"
/>

Double Cover Flipbook

---
import FlipBookDoubleCover from '~/components/widgets/FlipBookDoubleCover.astro';

const images = [
  '/path/to/cover-left.jpg',
  '/path/to/cover-right.jpg',
  '/path/to/page3.jpg',
  '/path/to/page4.jpg',
  // ... more pages (even number recommended)
];
---

<FlipBookDoubleCover
  images={images}
  title="My Flipbook Title"
  height={600}
  id="unique-id-2"
/>

Props

images - Array of image URLs (required)
title - Optional title displayed above the flipbook
height - Height in pixels (default: 600)
id - Unique ID to prevent conflicts when using multiple flipbooks (recommended)

Important Notes

Both components require jQuery and turn.js to be loaded on the page
Always provide a unique id prop when using multiple flipbooks on the same page
Components are fully independent and won't interfere with each other
Automatically responsive - 2 pages on desktop, 1 page on mobile