Mercurial > hg > digilib

annotate doc/src/site/markdown/client-integration.md @ 1226:d9d004f706ef

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added documentation/examples for client integration and plugins
author hertzhaft
date Fri, 18 Oct 2013 17:43:32 +0200
parents 13a52866c2c2
children 423b826afd5f
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
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
13 <img
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
14 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
15 </img>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
16
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
17 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
18
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
19 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
20
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
21 An example file called _static.html_ is provided in your digilib context root directory.
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 ## Using digilib images in embedded mode ##
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
24
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
25 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
26
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
27 <div class="mydiv">
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
28 <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
29 </div>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
30
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
31 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
32
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
33 <script type="text/javascript" src="jquery/jquery.js"></script>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
34 <script type="text/javascript" src="jquery/jquery.digilib.js"></script>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
35 <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
36 <script type="text/javascript" src="jquery/jquery.digilib.buttons.js"></script>
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
37
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
38 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
39
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
40 <script type="text/javascript">
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
41 $(document).ready(function(){
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
42 var options = {
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
43 interactionMode : 'embedded',
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
44 digilibBaseUrl : '/digilib'
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
45 };
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
46 $('.mydiv').digilib(options);
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
47 </script>
1223
13a52866c2c2 working on docs
robcast
parents:
diff changeset
48
1226
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
49 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.
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
50
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
51 div.mydiv {
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
52 position: relative;
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
53 width: 250px;
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
54 }
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
55
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
56 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
57
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
58 ## Using digilib fullscreen mode ##
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
59
d9d004f706ef added documentation/examples for client integration and plugins
hertzhaft
parents: 1223
diff changeset
60 An example file called _digilib.html_ is provided in your digilib context root directory.