We're pleased to announce the first version of Diva.js, a continuous document image viewer for displaying high-resolution document images in the web browser.
Diva (Document Image Viewer with Ajax) is a multi-page document image viewer, designed to present all document page images on a single page, rather than the traditional method of viewing page images one at a time. Using "lazy loading" and image tiling methods for loading parts of a document on demand, it presents a quick and efficient way of navigating through hundreds (or even thousands) of high-resolution page images from digitized books and other documents on a single web page. Lazy loading and image tiling have the additional benefit of allowing institutions to display their book and manuscript collections online while protecting against most forms of indiscriminate downloading and republishing.
Perhaps the most unique feature of Diva.js is that it is designed for displaying high- and low-resolution versions of the same page without requiring the user to download multiple images or navigate to different web pages. This is especially useful for displaying documents where users need the ability to "zoom" in on small details, and then "zoom" back out to quickly scroll through the document.
You can read more and download the code on our website ddmal.music.mcgill.ca/diva
Our demo features a manuscript inventory of musical sources ("Bonus Ordo," CH-BM, StiA Bd. 1206) from the collegiate Church of St. Michael in Beromünster, Switzerland . The images in this collection total 4.1 GB.
- Allows multiple-resolution photos to be displayed inline on a single web page;
- Intuitive mouse commands: Double-click to zoom in; ctrl-double-click to zoom out; Click-and-drag to move the image;
- "Lazy loading" and image tiling techniques promote fast display times even on slower connections, and offer limited protection for image copyrights;
- Fullscreen mode;
- Open Source
Diva requires some "behind the scenes" server infrastructure to function. Full installation requirements and instructions may be found athttps://github.com/DDMAL/diva.js/wiki
If you find Diva.js valuable, and are looking to integrate it in pilot or production projects, please get in touch and let us know how you're using it. If you want to help us develop it, please consult our developers documentation on GitHub. If you find a bug, please let us know by filing an issue on our GitHub page.