Integrating digilib into your web page

digilib can be integrated into other web pages on different levels:

using the image generated by the server as a static image
enable digilib interactive controls inside a fixed size image (“embedded mode”)
let the interactive image fill the browser window (“fullscreen mode”)

Using a static digilib image

Insert an image reference into your html code, referencing the “Scaler” servlet path in your digilib environment (servlet/Scaler, relative to your context). The image filename and path are specified in the fn parameter of the querystring.

    <img
        src="http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&dw=100&dh=100">
    </img>

Don’t forget to specify at least one of the dw and dh parameters! They inform the servlet about the desired size (in pixel) of the scaled image. Otherwise you’ll get an error image.

Any other parameters can be added to the query string in order to specify further transformations of the image, for instance zoom-in coordinates, rotation, color changes etc. Look here for more information about query string parameters.

An example file called static.html is provided in your digilib context root directory.

Using digilib images in embedded mode

To embed one or more scaled images with controls into your site, add one div element for each image to your HTML code. Set the image to load and its size in the scaler parameters fn / pn and dw / dh. These will be picked up by Digilib.

        <div class="mydiv">
            <img src="servlet/Scaler?dw=200&amp;dh=200&amp;fn=/p0005" />
        </div>

Apart from jQuery and jquery.digilib.js (the digilib plugin for jQuery) the digilib plugins geometry and buttons are needed. They must be loaded after digilib. See plugins for the plugin documentation.

        <script type="text/javascript" src="jquery/jquery.js"></script>
        <script type="text/javascript" src="jquery/jquery.digilib.js"></script>
        <script type="text/javascript" src="jquery/jquery.digilib.geometry.js"></script>
        <script type="text/javascript" src="jquery/jquery.digilib.buttons.js"></script>

Add a jQuery ready event handler for the Javascript document object. In the handler the initialization function digilib() should be called. Set the ìnteractionMode option to “embedded” and the digilibBaseUrl option to the digilib context path.

        <script type="text/javascript">
            $(document).ready(function() {
                var options = {
                    interactionMode : 'embedded',
                    digilibBaseUrl : '/digilib'
                    };
                $('.mydiv').digilib(options);
            });
        </script>

For the standard controls (contained in the buttons plugin) to be displayed next to the image, the <div> should have a position: relative CSS property and a fixed width.

        div.mydiv {
            position: relative;
            width: 250px;
        }

An example file called embedded.html is provided in your digilib context root directory.

Using digilib fullscreen mode

An example file called digilib.html is provided in your digilib context root directory.