clevelus / docview

Image viewer for large collections

Docview

Image viewer for large collections

DEMO

Dependencies

• jQuery
• jQuery Mouse Wheel
• jquery-top-scrollbar

Features

• Grid, Filmstrip, Inspect and Flip-Book modes
• Fullscreen mode
• Zooming pages
• Switching pages
• Rotating pages
• Download & Print
• Intellectual loading of images, determining the viewport, and loading only what you are looking at.
• Nice UX

Usage

Basic

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

var docview = new Docview({
  div: '.docview',
  zooms: [82, 164, 328, 492, 656, 818, 984, 1146],
  pages: [
    {id: 1, w: 1200, h: 1740},
    ..
  ],
  pageUrl: function(id, zoom) {
    return ['/pages', id, zoom, id + '.jpg'].join('/');
  }
});

Options

div - container for Docview

div: '.docview'

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',
  dim: 'Dim',
  prevPage: 'Previous Page',
  nextPage: 'Next Page',
  rotateLeft: 'Rotate Left',
  rotateRight: 'Rotate Right',
  download: 'Download',
  print: 'Print'
}

zooms - widths for zooms

  zooms: [82, 164, 328, 492, 656, 818, 984, 1146]

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

pages: [
  {id: 1, w: 1200, h: 1740},
  ..
]

pageUrl - function which returns url for a page by it's id and zoom

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

mode - initial mode ('grid' (default), 'filmstrip', 'inspect', 'flip-book')

mode: 'grid'

index - initial page, default 0

index: 0

zoom - initial zoom, default 0

zoom: 0

Events

dv-change - triggered when mode, index or zoom is changed

dv-dim - triggered when dim button is clicked

Author (Speransky Danil): LinkedIn | GitHub | StackOverflow