Mercurial > hg > digilib
diff client-integration.html @ 1640:1ae8b89d3a86
Creating site for 2.5-SNAPSHOT
| author | Robert Casties <casties@mpiwg-berlin.mpg.de> |
|---|---|
| date | Tue, 22 Aug 2017 16:38:19 +0000 |
| parents | |
| children | 16be3440305b |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client-integration.html Tue Aug 22 16:38:19 2017 +0000 @@ -0,0 +1,279 @@ +<!DOCTYPE html> +<!-- + | Generated by Apache Maven Doxia at 2017-08-22 + | 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="20170822" /> + <meta http-equiv="Content-Language" content="en" /> + <title>digilib - The Digital Image Library – 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="./" id="bannerLeft"> + <h2>digilib - a versatile image viewing environment for the internet</h2> + </a> + </div> + <div class="pull-right"> <a href="./" 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-08-22</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="install-digilib.html" title="Installing digilib"> + <i class="none"></i> + Installing digilib</a> + </li> + + <li> + + <a href="build-maven.html" title="Building digilib"> + <i class="none"></i> + Building digilib</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="http://maven.apache.org/images/logos/maven-feather.png" /> + </a> + <a href="http://www.sourceforge.net/" title="Hosted by SourceForge" class="builtBy"> + <img class="builtBy" alt="Hosted by SourceForge" src="http://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 (“embedded mode”)</li> + +<li>let the interactive image fill the browser window (“fullscreen mode”)</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 “Scaler” 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> <img + src="http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&dw=100&dh=100"> + </img> +</pre></div></div> +<p>Don’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’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> <div class="mydiv"> + <img src="servlet/Scaler?dw=200&amp;dh=200&amp;fn=/p0005" /> + </div> +</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> <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> +</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>ìnteractionMode</tt> option to “embedded” and the <tt>digilibBaseUrl</tt> option to the digilib context path.</p> + +<div class="source"> +<div class="source"> +<pre> <script type="text/javascript"> + $(document).ready(function(){ + var options = { + interactionMode : 'embedded', + digilibBaseUrl : '/digilib' + }; + $('.mydiv').digilib(options); + </script> +</pre></div></div> +<p>For the standard controls (contained in the buttons plugin) to be displayed next to the image, the <tt><div></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 © 2001-2017 + <a href="http://digilib.sourceforge.net">digilib Community</a>. + All Rights Reserved. + + </div> + + + + </div> + </footer> + </body> +</html>