Examples/Zoom

Zoom

Double-click cycles zoom levels · Ctrl+wheel or pinch to zoom · drag to pan when zoomed.

Source

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

const book = new Zine(document.getElementById('book'), {
  source: new ImageSource([
    '/sample-images/page-01.png',
    '/sample-images/page-02.png',
    '/sample-images/page-03.png',
    // ... more pages
  ]),
  zoom: {
    enabled: true,
    max: 4,
    wheel: true,
    doubleClick: [1, 2, 4],
  },
});