Mercurial > hg > digilib

comparison client-integration.html @ 1640:1ae8b89d3a86

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
-1:000000000000 1640:1ae8b89d3a86
1 <!DOCTYPE html>
2 <!--
3 | Generated by Apache Maven Doxia at 2017-08-22
4 | Rendered using Apache Maven Fluido Skin 1.3.0
5 -->
6 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
7 <head>
8 <meta charset="UTF-8" />
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 <meta name="Date-Revision-yyyymmdd" content="20170822" />
11 <meta http-equiv="Content-Language" content="en" />
12 <title>digilib - The Digital Image Library &#x2013; Integrating digilib into your web page</title>
13 <link rel="stylesheet" href="./css/apache-maven-fluido-1.3.0.min.css" />
14 <link rel="stylesheet" href="./css/site.css" />
15 <link rel="stylesheet" href="./css/print.css" media="print" />
16
17
18 <script type="text/javascript" src="./js/apache-maven-fluido-1.3.0.min.js"></script>
19
20
21 </head>
22 <body class="topBarDisabled">
23
24
25
26 <div class="container-fluid">
27 <div id="banner">
28 <div class="pull-left">
29 <a href="./" id="bannerLeft">
30 <h2>digilib - a versatile image viewing environment for the internet</h2>
31 </a>
32 </div>
33 <div class="pull-right"> <a href="./" id="bannerRight">
34 <img src="images/digilib-logo-small.png" />
35 </a>
36 </div>
37 <div class="clear"><hr/></div>
38 </div>
39
40 <div id="breadcrumbs">
41 <ul class="breadcrumb">
42
43
44 <li id="publishDate">Last Published: 2017-08-22</li>
45 <li class="divider">|</li> <li id="projectVersion">Version: 2.5-SNAPSHOT</li>
46
47
48
49
50 </ul>
51 </div>
52
53
54 <div class="row-fluid">
55 <div id="leftColumn" class="span3">
56 <div class="well sidebar-nav">
57
58
59 <ul class="nav nav-list">
60 <li class="nav-header">Overview</li>
61
62 <li>
63
64 <a href="index.html" title="About digilib">
65 <i class="none"></i>
66 About digilib</a>
67 </li>
68
69 <li>
70
71 <a href="features.html" title="digilib features">
72 <i class="none"></i>
73 digilib features</a>
74 </li>
75
76 <li>
77
78 <a href="digilib-short.html" title="How digilib works">
79 <i class="none"></i>
80 How digilib works</a>
81 </li>
82
83 <li>
84
85 <a href="history.html" title="Ancient history">
86 <i class="none"></i>
87 Ancient history</a>
88 </li>
89 <li class="nav-header">Installation</li>
90
91 <li>
92
93 <a href="install-digilib.html" title="Installing digilib">
94 <i class="none"></i>
95 Installing digilib</a>
96 </li>
97
98 <li>
99
100 <a href="build-maven.html" title="Building digilib">
101 <i class="none"></i>
102 Building digilib</a>
103 </li>
104 <li class="nav-header">Configuration</li>
105
106 <li>
107
108 <a href="digilib-config.html" title="Configuring digilib">
109 <i class="none"></i>
110 Configuring digilib</a>
111 </li>
112
113 <li>
114
115 <a href="image-directories.html" title="Directory layout">
116 <i class="none"></i>
117 Directory layout</a>
118 </li>
119
120 <li>
121
122 <a href="java-settings.html" title="Java settings and tuning">
123 <i class="none"></i>
124 Java settings and tuning</a>
125 </li>
126
127 <li>
128
129 <a href="auth.html" title="Access control">
130 <i class="none"></i>
131 Access control</a>
132 </li>
133 <li class="nav-header">Development</li>
134
135 <li>
136
137 <a href="scaler-api.html" title="The digilib Scaler API">
138 <i class="none"></i>
139 The digilib Scaler API</a>
140 </li>
141
142 <li>
143
144 <a href="iiif-api.html" title="The digilib IIIF API">
145 <i class="none"></i>
146 The digilib IIIF API</a>
147 </li>
148
149 <li class="active">
150
151 <a href="#"><i class="none"></i>Integrating digilib into your page</a>
152 </li>
153
154 <li>
155
156 <a href="plugins.html" title="Digilib plugins">
157 <i class="none"></i>
158 Digilib plugins</a>
159 </li>
160 <li class="nav-header">Project Documentation</li>
161
162 <li>
163
164 <a href="project-info.html" title="Project Information">
165 <i class="icon-chevron-right"></i>
166 Project Information</a>
167 </li>
168 </ul>
169
170
171
172 <hr class="divider" />
173
174 <div id="poweredBy">
175 <div class="clear"></div>
176 <div class="clear"></div>
177 <div class="clear"></div>
178 <a href="http://maven.apache.org/" title="Built by Maven" class="builtBy">
179 <img class="builtBy" alt="Built by Maven" src="http://maven.apache.org/images/logos/maven-feather.png" />
180 </a>
181 <a href="http://www.sourceforge.net/" title="Hosted by SourceForge" class="builtBy">
182 <img class="builtBy" alt="Hosted by SourceForge" src="http://upload.wikimedia.org/wikipedia/commons/0/0b/Sourceforge_logo.png" />
183 </a>
184 </div>
185 </div>
186 </div>
187
188
189 <div id="bodyColumn" class="span9" >
190
191 <h1>Integrating digilib into your web page</h1>
192 <p>digilib can be integrated into other web pages on different levels:</p>
193
194 <ol style="list-style-type: decimal">
195
196 <li>using the image generated by the server as a static image</li>
197
198 <li>enable digilib interactive controls inside a fixed size image (&#x201c;embedded mode&#x201d;)</li>
199
200 <li>let the interactive image fill the browser window (&#x201c;fullscreen mode&#x201d;)</li>
201 </ol>
202 <div class="section">
203 <h2><a name="Using_a_static_digilib_image"></a>Using a static digilib image</h2>
204 <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>
205
206 <div class="source">
207 <div class="source">
208 <pre> &lt;img
209 src=&quot;http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&amp;dw=100&amp;dh=100&quot;&gt;
210 &lt;/img&gt;
211 </pre></div></div>
212 <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>
213 <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>
214 <p>An example file called <i>static.html</i> is provided in your digilib context root directory.</p></div>
215 <div class="section">
216 <h2><a name="Using_digilib_images_in_embedded_mode"></a>Using digilib images in embedded mode</h2>
217 <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>
218
219 <div class="source">
220 <div class="source">
221 <pre> &lt;div class=&quot;mydiv&quot;&gt;
222 &lt;img src=&quot;servlet/Scaler?dw=200&amp;amp;dh=200&amp;amp;fn=/p0005&quot; /&gt;
223 &lt;/div&gt;
224 </pre></div></div>
225 <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>
226
227 <div class="source">
228 <div class="source">
229 <pre> &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.js&quot;&gt;&lt;/script&gt;
230 &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.digilib.js&quot;&gt;&lt;/script&gt;
231 &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.digilib.geometry.js&quot;&gt;&lt;/script&gt;
232 &lt;script type=&quot;text/javascript&quot; src=&quot;jquery/jquery.digilib.buttons.js&quot;&gt;&lt;/script&gt;
233 </pre></div></div>
234 <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>
235
236 <div class="source">
237 <div class="source">
238 <pre> &lt;script type=&quot;text/javascript&quot;&gt;
239 $(document).ready(function(){
240 var options = {
241 interactionMode : 'embedded',
242 digilibBaseUrl : '/digilib'
243 };
244 $('.mydiv').digilib(options);
245 &lt;/script&gt;
246 </pre></div></div>
247 <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>
248
249 <div class="source">
250 <div class="source">
251 <pre> div.mydiv {
252 position: relative;
253 width: 250px;
254 }
255 </pre></div></div>
256 <p>An example file called <i>embedded.html</i> is provided in your digilib context root directory.</p></div>
257 <div class="section">
258 <h2><a name="Using_digilib_fullscreen_mode"></a>Using digilib fullscreen mode</h2>
259 <p>An example file called <i>digilib.html</i> is provided in your digilib context root directory.</p></div>
260 </div>
261 </div>
262 </div>
263
264 <hr/>
265
266 <footer>
267 <div class="container-fluid">
268 <div class="row span12">Copyright &copy; 2001-2017
269 <a href="http://digilib.sourceforge.net">digilib Community</a>.
270 All Rights Reserved.
271
272 </div>
273
274
275
276 </div>
277 </footer>
278 </body>
279 </html>