Mercurial > hg > digilib
comparison 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 |
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 – 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 (“embedded mode”)</li> | |
199 | |
200 <li>let the interactive image fill the browser window (“fullscreen mode”)</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 “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> | |
205 | |
206 <div class="source"> | |
207 <div class="source"> | |
208 <pre> <img | |
209 src="http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&dw=100&dh=100"> | |
210 </img> | |
211 </pre></div></div> | |
212 <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> | |
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> <div class="mydiv"> | |
222 <img src="servlet/Scaler?dw=200&amp;dh=200&amp;fn=/p0005" /> | |
223 </div> | |
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> <script type="text/javascript" src="jquery/jquery.js"></script> | |
230 <script type="text/javascript" src="jquery/jquery.digilib.js"></script> | |
231 <script type="text/javascript" src="jquery/jquery.digilib.geometry.js"></script> | |
232 <script type="text/javascript" src="jquery/jquery.digilib.buttons.js"></script> | |
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>ìnteractionMode</tt> option to “embedded” and the <tt>digilibBaseUrl</tt> option to the digilib context path.</p> | |
235 | |
236 <div class="source"> | |
237 <div class="source"> | |
238 <pre> <script type="text/javascript"> | |
239 $(document).ready(function(){ | |
240 var options = { | |
241 interactionMode : 'embedded', | |
242 digilibBaseUrl : '/digilib' | |
243 }; | |
244 $('.mydiv').digilib(options); | |
245 </script> | |
246 </pre></div></div> | |
247 <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> | |
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 © 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> |