Mercurial > hg > digilib

comparison 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
comparison
equal deleted inserted replaced
1225:458e6c33b972 1226:d9d004f706ef
4 4
5 1. using the image generated by the server as a static image 5 1. using the image generated by the server as a static image
6 2. enable digilib interactive controls inside a fixed size image ("embedded mode") 6 2. enable digilib interactive controls inside a fixed size image ("embedded mode")
7 3. let the interactive image fill the browser window ("fullscreen mode") 7 3. let the interactive image fill the browser window ("fullscreen mode")
8 8
9 ## Using the static image ## 9 ## Using a static digilib image ##
10 10
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.
11 12
13 <img
14 src="http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&dw=100&dh=100">
15 </img>
12 16
13 ## Using digilib embedded mode ## 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.
14 18
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.
20
21 An example file called _static.html_ is provided in your digilib context root directory.
22
23 ## Using digilib images in embedded mode ##
24
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.
26
27 <div class="mydiv">
28 <img src="servlet/Scaler?dw=200&amp;dh=200&amp;fn=/p0005" />
29 </div>
30
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.
32
33 <script type="text/javascript" src="jquery/jquery.js"></script>
34 <script type="text/javascript" src="jquery/jquery.digilib.js"></script>
35 <script type="text/javascript" src="jquery/jquery.digilib.geometry.js"></script>
36 <script type="text/javascript" src="jquery/jquery.digilib.buttons.js"></script>
37
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.
39
40 <script type="text/javascript">
41 $(document).ready(function(){
42 var options = {
43 interactionMode : 'embedded',
44 digilibBaseUrl : '/digilib'
45 };
46 $('.mydiv').digilib(options);
47 </script>
48
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.
50
51 div.mydiv {
52 position: relative;
53 width: 250px;
54 }
55
56 An example file called _embedded.html_ is provided in your digilib context root directory.
15 57
16 ## Using digilib fullscreen mode ## 58 ## Using digilib fullscreen mode ##
59
60 An example file called _digilib.html_ is provided in your digilib context root directory.