-
Notifications
You must be signed in to change notification settings - Fork 38
Home
- Description
- Usage instructions
- JPEG 2000 Encoding
- Plugins
- Setup and installation
- Process
- Code documentation
- Development notes
- Document security
Diva.js (Document Image Viewer with AJAX) is a Javascript frontend for viewing documents, designed to work with digital libraries to present multi-page documents as a single, continuous item. Using "lazy loading" methods for loading parts of a document on demand, it presents a quick and efficient way of displaying hundreds (or even thousands) of high-resolution page images from digitized books and other documents on a single web page.
Version 3.0 (released Fall 2013) contains many new features and improvements:
- Optimized for speed!
- Simplified setup
- Expanded and improved API for use in external scripts
- New demo!
- Bug fixes (see commit log for details)
To browse through the pages within a document, simply scroll through the document panel using the scrollwheel, the scrollbar, the arrow keys or the page up/page down keys. To zoom in, either move the slider to the right or double-click the document viewer. To zoom out, move the slider to the left or hold control while double-clicking the document viewer. You can enter and subsequently exit fullscreen mode by clicking the icon in the top left corner.
For more, including usage instructions on touch devices, see the Usage instructions.
You can find a demo running at http://ddmal.music.mcgill.ca/diva/examples.
There are two main components to a diva.js install:
- The IIPImage installation, which will serve the images of the pages of the documents
- The frontend for the document viewer, created using the diva.js jQuery plugin
Additionally, you will need to configure your web server (Apache, Nginx, or similar) to serve JSON files to your JavaScript front-end. For a complete guide, see Installation.
This is a brief explanation of how the process works. For a more comprehensive overview of what exactly is happening when you request a document, see Process.
- The user loads the document viewer page, with a specific document being requested (as a GET variable, or as a flat page).
- The viewer sends an AJAX request to a web server for information about the document encoded in a JSON file.
- The viewer code then constructs the document viewer from the data, creating the HTML elements for the pages and tiles.
- The IIP Image Server takes the JPEG2000 or TIFF images hosted on the server and serves them as tile fragments of the full page image.
- Only pages that are in or near the viewport are loaded. As the user scrolls or browses to a page, Diva will load the associated tile images as necessary.
- Users may zoom in and out to view multiple sizes of the pages.
If you need a more thorough explanation of the code than what's offered in the comments, check out the Code documentation. There, you will find documentation on each function - parameters, return value, purpose - and on each of the settings. See the next section for documentation on known bugs and issues to watch out for that will be relevant if you're going to be making any modifications to the code.
There are a few things that you may need to watch out for if you're going to be altering the code - strange workarounds that aren't fully explained in the comments, unexpected behaviour, straight-out bugs, etc. These have been documented as thoroughly as possible in the Development notes.
For a list of known and past issues, check out the issue tracker.