Images

Build a flipbook from a list of image URLs.

ImageSource

Pass an array of image URLs. Pages decode automatically and neighboring pages prefetch in the background.

import { Zine, ImageSource } from '@zinejs/core';

const book = new Zine(document.getElementById('book'), {
  source: new ImageSource(
    [
      'https://example.com/page-1.png',
      'https://example.com/page-2.png',
      'https://example.com/page-3.png',
    ],
    {
      // How many neighbors to prefetch. Default 1.
      preload: 1,
      // 'contain' (default) or 'cover'
      fit: 'contain',
    },
  ),
});

Options

  • preload: adjacent pages to prefetch around the current page (default 1)
  • fit: 'contain' or 'cover'

See the image example.