Using the Plugins

Diva.js comes with three plugins that are enabled by default. The download and manipulation plugins add small icons to the top left of every page in document view. The metadata plugin adds an icon on the toolbar for the whole Diva instance. When clicked, these icons activate their respective plugins

These icons are for the download, manipulation, and metadata plugins respectively.

Note that one or both may be disabled for a particular document viewer, or could be configured with different settings. Instructions on configuring the default plugins is available here.

To enable a given plugin, first include that plugin's source file in the HTML:

<script src='build/plugins/download.js'></script>

Then, add plugins: [] as a setting when instantiating Diva in your HTML, and add the given plugin (such as Diva.DownloadPlugin) to this list:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function ()
    {
        diva = new Diva('diva-wrapper', {
            objectData: "url/to/manifest.json",
            plugins: [Diva.DownloadPlugin]
        });
    }, false)
</script>

Additionally, site administrators can create custom plugins. More information on that is available here.

The Download plugin

This plugin allows you to download an image for the page, at the current zoom level, in JPEG format. Click on the icon and a new tab or window will be opened to a page containing only the image. To download it to your computer, right-click the image and save it.

The Manipulation plugin

This plugin provides a way to perform basic image manipulation. Clicking on the icon will open a pane that takes over the browser window (in a similar manner to fullscreen mode). On the left side of the screen is the page preview. On the right side of the screen is the tools window, which contains several sliders that can apply filters the image.

To adjust a particular slider, click on the relevant icon. When you move the slider, the larger image will be updated immediately.

You can see a screenshot of this feature in action below.

The IIIF Metadata plugin

This plugin allows you to view the metadata of a IIIF Manifest. When clicked, an overlay containing the document metadata is displayed. The overlay can be dragged to a preferred location. Click the icon again, or the close button, to hide the overlay.