Mercurial > hg > digilib

<!DOCTYPE html>
<!--
 | Generated by Apache Maven Doxia at 2017-11-20
 | Rendered using Apache Maven Fluido Skin 1.3.0
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="Date-Revision-yyyymmdd" content="20171120" />
    <meta http-equiv="Content-Language" content="en" />
    <title>digilib - The Digital Image Library &#x2013; Integrating digilib into your web page</title>
    <link rel="stylesheet" href="./css/apache-maven-fluido-1.3.0.min.css" />
    <link rel="stylesheet" href="./css/site.css" />
    <link rel="stylesheet" href="./css/print.css" media="print" />


    <script type="text/javascript" src="./js/apache-maven-fluido-1.3.0.min.js"></script>


            </head>
        <body class="topBarDisabled">


        <div class="container-fluid">
          <div id="banner">
        <div class="pull-left">
                                    <a href="https://robcast.github.io/digilib/" id="bannerLeft">
                <h2>digilib - a versatile image viewing environment for the internet</h2>
                </a>
                      </div>
        <div class="pull-right">                  <a href="https://robcast.github.io/digilib/" id="bannerRight">
                                                                                                <img src="images/digilib-logo-small.png" />
                </a>
      </div>
        <div class="clear"><hr/></div>
      </div>

      <div id="breadcrumbs">
        <ul class="breadcrumb">


                  <li id="publishDate">Last Published: 2017-11-20</li>
                  <li class="divider">|</li> <li id="projectVersion">Version: 2.5-SNAPSHOT</li>


                            </ul>
      </div>


      <div class="row-fluid">
        <div id="leftColumn" class="span3">
          <div class="well sidebar-nav">


                <ul class="nav nav-list">
                    <li class="nav-header">Overview</li>

      <li>

                          <a href="index.html" title="About digilib">
          <i class="none"></i>
        About digilib</a>
            </li>

      <li>

                          <a href="features.html" title="digilib features">
          <i class="none"></i>
        digilib features</a>
            </li>

      <li>

                          <a href="digilib-short.html" title="How digilib works">
          <i class="none"></i>
        How digilib works</a>
            </li>

      <li>

                          <a href="history.html" title="Ancient history">
          <i class="none"></i>
        Ancient history</a>
            </li>
                              <li class="nav-header">Installation</li>

      <li>

                          <a href="build-maven.html" title="Building digilib">
          <i class="none"></i>
        Building digilib</a>
            </li>

      <li>

                          <a href="install-digilib.html" title="Installing digilib">
          <i class="none"></i>
        Installing digilib</a>
            </li>

      <li>

                          <a href="server-setups.html" title="Server setups">
          <i class="none"></i>
        Server setups</a>
            </li>
                              <li class="nav-header">Configuration</li>

      <li>

                          <a href="digilib-config.html" title="Configuring digilib">
          <i class="none"></i>
        Configuring digilib</a>
            </li>

      <li>

                          <a href="image-directories.html" title="Directory layout">
          <i class="none"></i>
        Directory layout</a>
            </li>

      <li>

                          <a href="java-settings.html" title="Java settings and tuning">
          <i class="none"></i>
        Java settings and tuning</a>
            </li>

      <li>

                          <a href="auth.html" title="Access control">
          <i class="none"></i>
        Access control</a>
            </li>
                              <li class="nav-header">Development</li>

      <li>

                          <a href="scaler-api.html" title="The digilib Scaler API">
          <i class="none"></i>
        The digilib Scaler API</a>
            </li>

      <li>

                          <a href="iiif-api.html" title="The digilib IIIF API">
          <i class="none"></i>
        The digilib IIIF API</a>
            </li>

      <li class="active">

            <a href="#"><i class="none"></i>Integrating digilib into your page</a>
          </li>

      <li>

                          <a href="plugins.html" title="Digilib plugins">
          <i class="none"></i>
        Digilib plugins</a>
            </li>
                              <li class="nav-header">Project Documentation</li>

      <li>

                          <a href="project-info.html" title="Project Information">
          <i class="icon-chevron-right"></i>
        Project Information</a>
                  </li>
            </ul>


          <hr class="divider" />

           <div id="poweredBy">
                            <div class="clear"></div>
                            <div class="clear"></div>
                            <div class="clear"></div>
                                                                                                                   <a href="http://maven.apache.org/" title="Built by Maven" class="builtBy">
        <img class="builtBy"  alt="Built by Maven" src="https://maven.apache.org/images/logos/maven-feather.png"    />
      </a>
                                                                                                    <a href="../../" title="Hosted by GitHub" class="builtBy">
        <img class="builtBy"  alt="Hosted by GitHub" src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Logo.png"   width="200px"  />
      </a>
                                                                                                    <a href="http://www.sourceforge.net/" title="Hosted by SourceForge" class="builtBy">
        <img class="builtBy"  alt="Hosted by SourceForge" src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Sourceforge_logo.png"    />
      </a>
                      </div>
          </div>
        </div>


        <div id="bodyColumn"  class="span9" >

            <h1>Integrating digilib into your web page</h1>
<p>digilib can be integrated into other web pages on different levels:</p>

<ol style="list-style-type: decimal">

<li>using the image generated by the server as a static image</li>

<li>enable digilib interactive controls inside a fixed size image (&#x201c;embedded mode&#x201d;)</li>

<li>let the interactive image fill the browser window (&#x201c;fullscreen mode&#x201d;)</li>
</ol>
<div class="section">
<h2><a name="Using_a_static_digilib_image"></a>Using a static digilib image</h2>
<p>Insert an image reference into your html code, referencing the &#x201c;Scaler&#x201d; servlet path in your digilib environment (servlet/Scaler, relative to your context). The image filename and path are specified in the <tt>fn</tt> parameter of the querystring. </p>

<div class="source">
<div class="source">
<pre>    &lt;img
        src=&quot;http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&amp;dw=100&amp;dh=100&quot;&gt;
    &lt;/img&gt;
</pre></div></div>
<p>Don&#x2019;t forget to specify at least one of the <tt>dw</tt> and <tt>dh</tt> parameters! They inform the servlet about the desired size (in pixel) of the scaled image. Otherwise you&#x2019;ll get an error image.</p>
<p>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 <a href="scaler-api.html">here</a> for more information about query string parameters.</p>
<p>An example file called <i>static.html</i> is provided in your digilib context root directory.</p></div>
<div class="section">
<h2><a name="Using_digilib_images_in_embedded_mode"></a>Using digilib images in embedded mode</h2>
<p>To embed one or more scaled images with controls into your site, add one <tt>div</tt> element for each image to your HTML code. Set the image to load and its size in the scaler parameters <tt>fn / pn</tt> and <tt>dw / dh</tt>. These will be picked up by Digilib.</p>

<div class="source">
<div class="source">
<pre>        &lt;div class=&quot;mydiv&quot;&gt;
            &lt;img src=&quot;servlet/Scaler?dw=200&amp;amp;dh=200&amp;amp;fn=/p0005&quot; /&gt;
        &lt;/div&gt;
</pre></div></div>
<p>Apart from jQuery and jquery.digilib.js (the digilib plugin for jQuery) the digilib plugins <tt>geometry</tt> and <tt>buttons</tt> are needed. They must be loaded <i>after</i> digilib. See <a href="plugins.html">plugins</a> for the plugin documentation.</p>

<div class="source">
<div class="source">
<pre>        &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.digilib.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.digilib.geometry.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.digilib.buttons.js&quot;&gt;&lt;/script&gt;
</pre></div></div>
<p>Add a jQuery <tt>ready</tt> event handler for the Javascript <tt>document</tt> object. In the handler the initialization function <tt>digilib()</tt> should be called. Set the <tt>&#xec;nteractionMode</tt> option to &#x201c;embedded&#x201d; and the <tt>digilibBaseUrl</tt> option to the digilib context path.</p>

<div class="source">
<div class="source">
<pre>        &lt;script type=&quot;text/javascript&quot;&gt;
            $(document).ready(function(){
                var options = {
                    interactionMode : 'embedded',
                    digilibBaseUrl : '/digilib'
                    };
                $('.mydiv').digilib(options);
        &lt;/script&gt;
</pre></div></div>
<p>For the standard controls (contained in the buttons plugin) to be displayed next to the image, the <tt>&lt;div&gt;</tt> should have a <tt>position: relative</tt> CSS property and a fixed width.</p>

<div class="source">
<div class="source">
<pre>        div.mydiv {
            position: relative;
            width: 250px;
        }
</pre></div></div>
<p>An example file called <i>embedded.html</i> is provided in your digilib context root directory.</p></div>
<div class="section">
<h2><a name="Using_digilib_fullscreen_mode"></a>Using digilib fullscreen mode</h2>
<p>An example file called <i>digilib.html</i> is provided in your digilib context root directory.</p></div>
                  </div>
            </div>
          </div>

    <hr/>

    <footer>
            <div class="container-fluid">
              <div class="row span12">Copyright &copy;                    2001-2017
                        <a href="https://robcast.github.io/digilib/">digilib Community</a>.
            All Rights Reserved.

      </div>


                </div>
    </footer>
  </body>
</html>
author	Robert Casties <casties@mpiwg-berlin.mpg.de>
date	Mon, 20 Nov 2017 20:24:00 +0000
parents	636e7342b1b6
children	1beeb9319d78