Mercurial > hg > digilib

annotate doc/src/site/markdown/client-integration.md @ 1714:d497eb11141c default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
updated travis-ci config for automatic WAR releases.
author Robert Casties <casties@mpiwg-berlin.mpg.de>
date Mon, 18 Feb 2019 20:49:15 +0100
parents 423b826afd5f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1223
13a52866c2c2 working on docs
robcast
parents:
diff changeset
1 # Integrating digilib into your web page #
13a52866c2c2 working on docs
robcast
parents:
diff changeset
2
13a52866c2c2 working on docs
robcast
parents:
diff changeset
3 digilib can be integrated into other web pages on different levels:
13a52866c2c2 working on docs
robcast
parents:
diff changeset
4
13a52866c2c2 working on docs
robcast
parents:
diff changeset
5 1. using the image generated by the server as a static image
13a52866c2c2 working on docs
robcast
parents:
diff changeset
6 2. enable digilib interactive controls inside a fixed size image ("embedded mode")
13a52866c2c2 working on docs
robcast
parents:
diff changeset
7 3. let the interactive image fill the browser window ("fullscreen mode")
13a52866c2c2 working on docs
robcast
parents:
diff changeset
8
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
9 ## Using a static digilib image ##
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
10
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
11 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.
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
12
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
13 ```html
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
14 <img
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
15 src="http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&dw=100&dh=100">
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
16 </img>
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
17 ```
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
18
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
19 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.
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
20
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
21 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](scaler-api.html) for more information about query string parameters.
1223
13a52866c2c2 working on docs
robcast
parents:
diff changeset
22
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
23 An example file called _static.html_ is provided in your digilib context root directory.
1223
13a52866c2c2 working on docs
robcast
parents:
diff changeset
24
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
25 ## Using digilib images in embedded mode ##
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
26
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
27 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.
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
28
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
29 ```html
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
30 <div class="mydiv">
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
31 <img src="servlet/Scaler?dw=200&amp;dh=200&amp;fn=/p0005" />
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
32 </div>
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
33 ```
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
34
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
35 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](plugins.html) for the plugin documentation.
1223
13a52866c2c2 working on docs
robcast
parents:
diff changeset
36
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
37 ```html
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
38 <script type="text/javascript" src="jquery/jquery.js"></script>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
39 <script type="text/javascript" src="jquery/jquery.digilib.js"></script>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
40 <script type="text/javascript" src="jquery/jquery.digilib.geometry.js"></script>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
41 <script type="text/javascript" src="jquery/jquery.digilib.buttons.js"></script>
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
42 ```
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
43
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
44 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.
1223
13a52866c2c2 working on docs
robcast
parents:
diff changeset
45
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
46 ```html
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
47 <script type="text/javascript">
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
48 $(document).ready(function(){
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
49 var options = {
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
50 interactionMode : 'embedded',
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
51 digilibBaseUrl : '/digilib'
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
52 };
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
53 $('.mydiv').digilib(options);
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
54 </script>
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
55 ```
1223
13a52866c2c2 working on docs
robcast
parents:
diff changeset
56
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
57 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.
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
58
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
59 ```css
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
60 div.mydiv {
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
61 position: relative;
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
62 width: 250px;
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
63 }
1227
423b826afd5f maven choked on <div> tag in the text
hertzhaft
parents: 1226
diff changeset
64 ```
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
65
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
66 An example file called _embedded.html_ is provided in your digilib context root directory.
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
67
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
68 ## Using digilib fullscreen mode ##
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
69
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
70 An example file called _digilib.html_ is provided in your digilib context root directory.