Docview

Docview is a tool for displaying images.

DEMO

Dependencies

Features

Usage

Basic

<link rel="stylesheet" href="docview.css">
<script src="docview.js"></script>

<div class="galery"></div>
new Docview({
  div: $('.galery'),
  pages: [
    { id: 0, w: 1146, h: 1540 },
    { id: 1, w: 1146, h: 1540 },
    { id: 2, w: 1146, h: 1540 },
    { id: 3, w: 1146, h: 1540 },
    { id: 4, w: 1146, h: 1540 },
    { id: 5, w: 1146, h: 1540 },
    { id: 6, w: 1146, h: 1540 },
    { id: 7, w: 1146, h: 1540 },
    { id: 8, w: 1146, h: 1540 },
    { id: 9, w: 1146, h: 1540 }
  ],
  zooms: {
    0: 82,
    1: 164,
    2: 328,
    3: 492,
    4: 656,
    5: 818,
    6: 984,
    7: 1146
  },
  maxZoom: 8,
  pageUrl: function(id, zoom) {
    return ['/pages', id, zoom].join('/') + '.jpg';
  }
});

Params

div - div in which the Docview will be placed.
div: $('.galery')

theme - the look, possible values: ‘standard’, ‘simple’, ‘dark’; ‘standard’ - is the default value.
theme: 'standard'

translation - you can change text for tooltips, the default values are written below.

translation: {
  grid: 'Grid',
  filmstrip: 'Filmstrip',
  inspect: 'Inspect',
  flipBook: 'Flip-book',
  fullscreen: 'Fullscreen',
  zoomOut: 'Zoom out',
  zoomIn: 'Zoom in',
  dimTheLights: 'Dim the lights',
  prevPage: 'Previous page',
  nextPage: 'Next page',
  rotateLeft: 'Rotate left',
  rotateRight: 'Rotate right',
  download: 'Download',
  print: 'Print'
}

index - initial page; default value: 0.
index: 0

mode - initial mode; possible values: ‘grid’, ‘filmstrip’, ‘inspect’, ‘flip-book’; default value: ‘grid’.
mode: 'grid'

zoom - initial zoom; default value: 0.
zoom: 0

pages - pages to display; id, width and height should be specified.

  pages: [
    { id: 0, w: 1146, h: 1540 },
    { id: 1, w: 1146, h: 1540 },
    { id: 2, w: 1146, h: 1540 },
    { id: 3, w: 1146, h: 1540 },
    { id: 4, w: 1146, h: 1540 },
    { id: 5, w: 1146, h: 1540 },
    { id: 6, w: 1146, h: 1540 },
    { id: 7, w: 1146, h: 1540 },
    { id: 8, w: 1146, h: 1540 },
    { id: 9, w: 1146, h: 1540 }
  ]

zooms - possible zooms; key - number of a zoom, value - width of the zoom.

  zooms: {
    0: 82,
    1: 164,
    2: 328,
    3: 492,
    4: 656,
    5: 818,
    6: 984,
    7: 1146
  }

maxZoom - the allowed max zoom; event docview-access-denied will be sent when trying to access a zoom greater then that.
maxZoom: 8

pageUrl - function which should return url for a page by it’s id and zoom.

pageUrl: function(id, zoom) {
  return ['./data', parseInt(id) % 10, zoom + '.jpg'].join('/');
}

Screenshots

screen

screen

screen

screen

Author (Speransky Danil): LinkedIn | GitHub | StackOverflow