Mercurial > hg > digilib

changeset 1274:8f8dff61535a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first step towards a transparent overlay image plugin
author hertzhaft
date Thu, 06 Feb 2014 16:11:31 +0100
parents 30ec52034355
children 05a07c9852a3
files webapp/src/main/webapp/jquery/img/fullscreen/32/move-transparent.png webapp/src/main/webapp/jquery/img/fullscreen/32/set-opacity.png webapp/src/main/webapp/jquery/img/fullscreen/32/toggle-transparent.png webapp/src/main/webapp/jquery/img/fullscreen/32/zoom-transparent.png webapp/src/main/webapp/jquery/img/fullscreen3.svg webapp/src/main/webapp/jquery/jquery.digilib.transparent.js webapp/src/main/webapp/jquery/test-transparent.html
diffstat 7 files changed, 459 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/move-transparent.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/set-opacity.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/toggle-transparent.png has changed
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/zoom-transparent.png has changed
--- a/webapp/src/main/webapp/jquery/img/fullscreen3.svg	Fri Jan 31 12:26:08 2014 +0100
+++ b/webapp/src/main/webapp/jquery/img/fullscreen3.svg	Thu Feb 06 16:11:31 2014 +0100
@@ -8,6 +8,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="32"
@@ -24,6 +25,17 @@
   <defs
      id="defs2390">
     <linearGradient
+       id="linearGradient4776">
+      <stop
+         style="stop-color:#008000;stop-opacity:1;"
+         offset="0"
+         id="stop4778" />
+      <stop
+         style="stop-color:#008000;stop-opacity:0;"
+         offset="1"
+         id="stop4780" />
+    </linearGradient>
+    <linearGradient
        id="linearGradient7314"
        osb:paint="solid">
       <stop
@@ -111,6 +123,15 @@
          offset="1"
          id="stop3080" />
     </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4776"
+       id="linearGradient4782"
+       x1="11.660099"
+       y1="23.999999"
+       x2="35.987423"
+       y2="23.999999"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <sodipodi:namedview
      id="base"
@@ -122,13 +143,13 @@
      inkscape:zoom="16"
      inkscape:cx="4.0072005"
      inkscape:cy="23.109701"
-     inkscape:current-layer="layer7"
+     inkscape:current-layer="g3944"
      showgrid="true"
      inkscape:grid-bbox="true"
      inkscape:document-units="px"
-     inkscape:window-width="1440"
-     inkscape:window-height="881"
-     inkscape:window-x="-4"
+     inkscape:window-width="1268"
+     inkscape:window-height="837"
+     inkscape:window-x="1436"
      inkscape:window-y="-4"
      inkscape:window-maximized="1"
      showguides="true"
@@ -194,7 +215,7 @@
      sodipodi:insensitive="true">
     <path
        transform="matrix(0.87955865,0,0,0.86576173,-2.7623298,1.2980787)"
-       d="m 48.142857,26.214285 a 17.928572,18.214285 0 1 1 -35.857144,0 17.928572,18.214285 0 1 1 35.857144,0 z"
+       d="m 48.142857,26.214285 c 0,10.059472 -8.026895,18.214285 -17.928572,18.214285 -9.901677,0 -17.928572,-8.154813 -17.928572,-18.214285 C 12.285713,16.154813 20.312608,8 30.214285,8 c 9.901677,0 17.928572,8.154813 17.928572,18.214285 z"
        sodipodi:ry="18.214285"
        sodipodi:rx="17.928572"
        sodipodi:cy="26.214285"
@@ -294,7 +315,7 @@
          sodipodi:cy="12.5"
          sodipodi:rx="10.214286"
          sodipodi:ry="10.214286"
-         d="m 44.857142,12.5 c 0,5.641194 -4.573091,10.214286 -10.214285,10.214286 -5.641195,0 -10.214286,-4.573092 -10.214286,-10.214286 0,-5.6411943 4.573091,-10.2142859 10.214286,-10.2142859 5.641194,0 10.214285,4.5730916 10.214285,10.2142859 z"
+         d="m 44.857142,12.5 a 10.214286,10.214286 0 1 1 -20.428571,0 10.214286,10.214286 0 1 1 20.428571,0 z"
          transform="translate(-10.42857,10.28571)" />
       <g
          style="fill:#4d4d4d;fill-opacity:1;stroke:#4d4d4d;stroke-width:1.08393705"
@@ -360,7 +381,7 @@
        sodipodi:cy="23.66371"
        sodipodi:rx="4.2291727"
        sodipodi:ry="4.3775644"
-       d="m 29.604207,23.66371 c 0,2.417662 -1.893465,4.377564 -4.229173,4.377564 -2.335707,0 -4.229172,-1.959902 -4.229172,-4.377564 0,-2.417662 1.893465,-4.377565 4.229172,-4.377565 2.335708,0 4.229173,1.959903 4.229173,4.377565 z"
+       d="m 29.604207,23.66371 a 4.2291727,4.3775644 0 1 1 -8.458345,0 4.2291727,4.3775644 0 1 1 8.458345,0 z"
        transform="matrix(1.2610819,0,0,1.2183335,-7.993339,-4.8302894)" />
   </g>
   <g
@@ -742,7 +763,7 @@
          style="fill:none;stroke:#000000;stroke-width:3.0204308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
       <path
          transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)"
-         d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z"
+         d="m 24.857143,16.857143 c 0,3.077016 -2.686291,5.571429 -6,5.571429 -3.313708,0 -6,-2.494413 -6,-5.571429 0,-3.077015 2.686292,-5.571428 6,-5.571428 3.313709,0 6,2.494413 6,5.571428 z"
          sodipodi:ry="5.5714288"
          sodipodi:rx="6"
          sodipodi:cy="16.857143"
@@ -846,7 +867,7 @@
          sodipodi:cy="16.857143"
          sodipodi:rx="6"
          sodipodi:ry="5.5714288"
-         d="m 24.857143,16.857143 c 0,3.077016 -2.686291,5.571429 -6,5.571429 -3.313708,0 -6,-2.494413 -6,-5.571429 0,-3.077015 2.686292,-5.571428 6,-5.571428 3.313709,0 6,2.494413 6,5.571428 z"
+         d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z"
          transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)" />
     </g>
   </g>
@@ -1578,7 +1599,7 @@
          style="fill:none;stroke:#000000;stroke-width:3.0204308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
       <path
          transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)"
-         d="m 24.857143,16.857143 c 0,3.077016 -2.686291,5.571429 -6,5.571429 -3.313708,0 -6,-2.494413 -6,-5.571429 0,-3.077015 2.686292,-5.571428 6,-5.571428 3.313709,0 6,2.494413 6,5.571428 z"
+         d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z"
          sodipodi:ry="5.5714288"
          sodipodi:rx="6"
          sodipodi:cy="16.857143"
@@ -1597,7 +1618,7 @@
      sodipodi:insensitive="true">
     <path
        transform="matrix(0.86721436,0,0,0.90813654,0.46798366,6.0967375)"
-       d="m 37.571428,19.714285 c 0,5.601745 -4.66903,10.142857 -10.428571,10.142857 -5.759542,0 -10.428572,-4.541112 -10.428572,-10.142857 0,-5.601746 4.66903,-10.1428577 10.428572,-10.1428577 5.759541,0 10.428571,4.5411117 10.428571,10.1428577 z"
+       d="m 37.571428,19.714285 a 10.428572,10.142858 0 1 1 -20.857143,0 10.428572,10.142858 0 1 1 20.857143,0 z"
        sodipodi:ry="10.142858"
        sodipodi:rx="10.428572"
        sodipodi:cy="19.714285"
@@ -1638,7 +1659,7 @@
        sodipodi:cy="19.714285"
        sodipodi:rx="10.428572"
        sodipodi:ry="10.142858"
-       d="m 37.571428,19.714285 a 10.428572,10.142858 0 1 1 -20.857143,0 10.428572,10.142858 0 1 1 20.857143,0 z"
+       d="m 37.571428,19.714285 c 0,5.601745 -4.66903,10.142857 -10.428571,10.142857 -5.759542,0 -10.428572,-4.541112 -10.428572,-10.142857 0,-5.601746 4.66903,-10.1428577 10.428572,-10.1428577 5.759541,0 10.428571,4.5411117 10.428571,10.1428577 z"
        transform="matrix(0.86721436,0,0,0.90813654,0.46798366,6.0967375)" />
     <path
        style="fill:none;stroke:#000000;stroke-width:4.10256433;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
@@ -1752,4 +1773,134 @@
        sodipodi:ry="2.4375"
        d="m 18.448355,4 a 2.4375,2.4375 0 1 1 -4.875,0 2.4375,2.4375 0 1 1 4.875,0 z" />
   </g>
+  <g
+     transform="translate(-7.8129058,-7.9934033)"
+     inkscape:groupmode="layer"
+     id="g3928"
+     inkscape:label="move-transparent"
+     style="display:none"
+     sodipodi:insensitive="true">
+    <rect
+       style="fill:#ffffff;fill-opacity:0.70588235;stroke:#808080;stroke-width:0.82051277;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect3930"
+       width="18.871796"
+       height="23.794872"
+       x="14.570762"
+       y="12.102564" />
+    <path
+       sodipodi:type="star"
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.95780945;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="path3934"
+       sodipodi:sides="3"
+       sodipodi:cx="13.206889"
+       sodipodi:cy="23.960493"
+       sodipodi:r1="4.7589669"
+       sodipodi:r2="2.4498732"
+       sodipodi:arg1="1.0303768"
+       sodipodi:arg2="2.0775744"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 15.655358,28.041273 -3.637546,-1.938824 -3.5692165,-2.06191 3.4978445,-2.180795 3.570274,-2.060077 0.139702,4.119619 z"
+       inkscape:transform-center-x="-0.68473337"
+       inkscape:transform-center-y="0.024430162"
+       transform="matrix(-0.59574618,-0.01564856,0.01294692,-0.72006076,37.253533,41.468091)" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path3940"
+       d="m 19.733288,24 11.171304,0"
+       style="fill:none;stroke:#000000;stroke-width:0.72995842px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <rect
+       y="19.160137"
+       x="12.090301"
+       height="9.6797247"
+       width="11.44521"
+       id="rect3948-94"
+       style="opacity:0.5;fill:#008000;fill-opacity:1;stroke:#808080;stroke-width:0.82051283;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.64102565, 1.64102565;stroke-dashoffset:0;display:inline" />
+  </g>
+  <g
+     transform="translate(-7.8129058,-7.9934033)"
+     style="display:none"
+     inkscape:label="zoom-transparent"
+     id="g3944"
+     inkscape:groupmode="layer"
+     sodipodi:insensitive="true">
+    <rect
+       y="12.102564"
+       x="14.570762"
+       height="23.794872"
+       width="18.871796"
+       id="rect3946"
+       style="fill:#ffffff;fill-opacity:0.69411765;stroke:#808080;stroke-width:0.82051277;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+    <rect
+       y="19.160137"
+       x="12.159054"
+       height="9.6797247"
+       width="11.44521"
+       id="rect3948"
+       style="opacity:0.5;fill:#008000;fill-opacity:1;stroke:#808080;stroke-width:0.82051283;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.64102565, 1.64102565;stroke-dashoffset:0" />
+    <g
+       transform="matrix(0.82051283,0,0,0.82051283,10.200683,-3.0397306)"
+       id="g3950">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:3.0204308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
+         d="m 7.0446086,42.697351 c -5.781968,5.436776 -5.781968,5.436776 -5.781968,5.436776"
+         id="path3952"
+         inkscape:connector-curvature="0" />
+      <path
+         sodipodi:type="arc"
+         style="fill:none;stroke:#000000;stroke-opacity:1;display:inline"
+         id="path3954"
+         sodipodi:cx="18.857143"
+         sodipodi:cy="16.857143"
+         sodipodi:rx="6"
+         sodipodi:ry="5.5714288"
+         d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z"
+         transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)" />
+    </g>
+  </g>
+  <g
+     transform="translate(-7.8129058,-7.9934033)"
+     style="display:none"
+     inkscape:label="toggle-transparent"
+     id="g3956"
+     inkscape:groupmode="layer"
+     sodipodi:insensitive="true">
+    <rect
+       y="12.102564"
+       x="14.570762"
+       height="23.794872"
+       width="18.871796"
+       id="rect3958"
+       style="fill:#ffffff;fill-opacity:0.70588235;stroke:#808080;stroke-width:0.82051277;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+    <rect
+       y="19.160137"
+       x="12.226156"
+       height="9.6797247"
+       width="11.44521"
+       id="rect3948-9"
+       style="opacity:0.5;fill:#008000;fill-opacity:1;stroke:#808080;stroke-width:0.82051283;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.64102565, 1.64102565;stroke-dashoffset:0;display:inline" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g3966"
+     inkscape:label="set-opacity"
+     style="display:none"
+     transform="translate(-7.8129058,-7.9934033)"
+     sodipodi:insensitive="true">
+    <rect
+       style="fill:#ffffff;fill-opacity:0.70588235;stroke:#808080;stroke-width:0.82051277;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect3968"
+       width="18.871796"
+       height="23.794872"
+       x="14.570762"
+       y="12.102564" />
+    <rect
+       y="19.186953"
+       x="12.242118"
+       height="9.6260929"
+       width="23.163286"
+       id="rect3948-3"
+       style="fill:url(#linearGradient4782);fill-opacity:1;stroke:#808080;stroke-width:1.16403782;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:2.32807565, 2.32807565;stroke-dashoffset:0;display:inline" />
+  </g>
 </svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.transparent.js	Thu Feb 06 16:11:31 2014 +0100
@@ -0,0 +1,247 @@
+/*
+ * #%L
+ * digilib transparent plugin
+ * %%
+ * Copyright (C) 2011 - 2014 Bibliotheca Hertziana, MPIWG Berlin
+ * %%
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as 
+ * published by the Free Software Foundation, either version 3 of the 
+ * License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Lesser Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Lesser Public 
+ * License along with this program.  If not, see
+ * <http://www.gnu.org/licenses/lgpl-3.0.html>.
+ * #L%
+ * Authors: Robert Casties, Martin Raspe
+ */
+/**
+digilib transparent plugin
+ */
+
+(function($) {
+
+    // affine geometry
+    var geom;
+    // plugin object with digilib data
+    var digilib;
+
+    var FULL_AREA;
+
+    // the functions made available by digilib
+    var fn = {
+        // dummy function to avoid errors, gets overwritten by buttons plugin
+        highlightButtons : function () {
+            console.debug('transparent: dummy function - highlightButtons');
+            }
+        };
+
+    var buttons = {
+            toggletransparent : {
+                onclick : "toggleTransparent",
+                tooltip : "show transparent image",
+                icon : "toggle-transparent.png"
+                },
+            setopacity : {
+                onclick : "setOpacity",
+                tooltip : "set the opacity of the transparent image",
+                icon : "set-opacity.png"
+                },
+            movetransparent : {
+                onclick : "moveTransparent",
+                tooltip : "move the transparent image",
+                icon : "move-transparent.png"
+                },
+            zoomtransparent : {
+                onclick : "zoomTransparent",
+                tooltip : "zomm the transparent image",
+                icon : "zoom-transparent.png"
+                },
+    };
+
+    var defaults = {
+        // is transparent image visible?
+        'isTransparentVisible' : false,
+        // Transparency of image
+        'opacity' : 0.5,
+        // digilib file path for transparent image
+        'tfn' : '',
+        // digilib file number for transparent image
+        'tpn' : '',
+        // relative digilib coordinates for transparent image
+        'trect' : null,
+        // general buttonset of this plugin
+        'transparentSet' : ['toggletransparent', 'setopacity', 'movetransparent', 'zoomtransparent']
+        };
+
+    var actions = {
+            // show or hide transparent image
+            toggleTransparent : function (data, param) {
+                var settings = data.settings;
+                var show = !data.settings.isTransparentVisible;
+                data.settings.isTransparentVisible = show;
+                fn.highlightButtons(data, 'transparent', show);
+                renderTransparent(data);
+                console.log('toggleTransparent');
+            },
+            // make the scaler image shine through
+            setOpacity : function (data, param) {
+                var settings = data.settings;
+                console.log('setOpacity');
+            },
+            // move the transparent image with respect to the scaler image
+            moveTransparent : function (data, param) {
+                var settings = data.settings;
+                console.log('moveTransparent');
+            },
+            // zoom the transparent image with respect to the scaler image
+            zoomTransparent : function (data, param) {
+                var settings = data.settings;
+                console.log('zoomTransparent');
+            }
+    };
+
+    // show a transparent image on top of the scaler image 
+    var renderTransparent = function (data) {
+        //var zoomArea = data.zoomArea;
+        //if (!data.imgTrafo) return;
+        var settings = data.settings;
+        var cssPrefix = data.settings.cssPrefix;
+        var selector = '#'+cssPrefix+'transparent';
+        var $tp = data.$tp;
+        if ($tp == null) {
+            $tp = $('<div id="'+cssPrefix+'transparent"/>');
+            var queryString = fn.getParamString(settings, ['dw', 'dh']);
+            var file = settings.tfn
+                ? "&fn=" + settings.tfn
+                : "&pn=" + settings.tpn;
+            var url = settings.scalerBaseUrl + '?' + queryString + file;
+            var css = {
+                'position' : 'absolute',
+                'background-image' : 'url(' + url + ')',
+                'background-repeat' : 'no-repeat',
+                'background-position' : '0px 0px',
+                'opacity' : settings.opacity
+                };
+            $tp.css(css);
+            data.$elem.append($tp);
+            data.$tp = $tp;
+            }
+        var show = data.settings.isTransparentVisible;
+        if (show){ 
+            $tp.fadeIn();
+            data.imgRect.adjustDiv($tp);
+            }
+        else {
+            $tp.fadeOut();
+        }
+    };
+
+    // reload display after the transparent has been moved or resized
+    var redisplay = function (data) {
+        packParams(data);
+        fn.redisplay(data);
+    };
+
+    // read transparent img from URL parameters
+    var unpackParams = function (data) { 
+        var tc = data.settings.tc;
+        if (tc == null) return ;
+        var pos = coord.split("/", 4);
+        var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
+        return rect;
+    };
+
+    // pack transparent coords into URL parameter string
+    var packParams = function (data) {
+        var rect = data.settings.trect;
+        var packed = packCoords(rect, '/');
+        console.debug('pack transparent coordinates:', packed);
+        return packed;
+    };
+
+    // additional buttons
+    var installButtons = function (data) {
+        var settings = data.settings;
+        var mode = settings.interactionMode;
+        var buttonSettings = settings.buttonSettings[mode];
+        var buttonSet = settings.transparentSet;
+        if (buttonSet.length && buttonSet.length > 0) {
+            buttonSettings.transparentSet = buttonSet;
+            buttonSettings.buttonSets.push('transparentSet');
+            }
+    };
+
+    // plugin installation routine, called by digilib on each plugin object.
+    var install = function(plugin) {
+        digilib = plugin;
+        console.debug('installing transparent plugin. digilib:', digilib);
+        // import geometry classes
+        geom = digilib.fn.geometry;
+        // import digilib functions
+        $.extend(fn, digilib.fn);
+        FULL_AREA = geom.rectangle(0,0,1,1);
+        // add defaults, actions, buttons to the main digilib object
+        $.extend(digilib.defaults, defaults);
+        $.extend(digilib.actions, actions);
+        $.extend(digilib.buttons, buttons);
+    };
+
+    // plugin initialization
+    var init = function (data) {
+        console.debug('initialising transparent plugin. data:', data);
+        var $data = $(data);
+        // install event handlers
+        $data.bind('setup', handleSetup);
+        $data.bind('update', handleUpdate);
+        $data.bind('redisplay', handleRedisplay);
+        $data.bind('dragZoom', handleDragZoom);
+        // install buttons if button plugin is present
+        if (digilib.plugins.buttons != null) {
+            installButtons(data);
+        }
+    };
+
+
+    var handleSetup = function (evt) {
+        console.debug("transparent: handleSetup");
+        var data = this;
+    };
+
+    var handleUpdate = function (evt) {
+        console.debug("transparent: handleUpdate");
+        var data = this;
+    };
+
+    var handleRedisplay = function (evt) {
+        console.debug("transparent: handleRedisplay");
+        var data = this;
+    };
+
+    var handleDragZoom = function (evt, zoomArea) {
+        var data = this;
+    };
+
+    // plugin object, containing name, install and init routines 
+    // all shared objects are filled by digilib on registration
+    var plugin = {
+            name : 'transparent',
+            install : install,
+            init : init,
+            buttons : {},
+            actions : {},
+            fn : {},
+            plugins : {}
+    };
+
+    if ($.fn.digilib == null) {
+        $.error("jquery.digilib.transparent.js must be loaded after jquery.digilib!");
+    } else {
+        $.fn.digilib('plugin', plugin);
+    }
+})(jQuery);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/test-transparent.html	Thu Feb 06 16:11:31 2014 +0100
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="initial-scale=1.0"/>
+        <title>Digilib: Transparent plugin test</title>
+        <!-- <base href="http://img.biblhertz.it/" target="_blank" /> -->
+
+        <style type="text/css">
+            body {
+                 background: silver;
+            }
+        </style>
+
+        <script type="text/javascript" src="jquery.js"></script>
+        <script type="text/javascript" src="jquery.cookie.js"></script>
+        <script type="text/javascript" src="jquery.digilib.js"></script>
+        <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
+        <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
+        <script type="text/javascript" src="jquery.range.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.range.css" />
+        <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
+        <script type="text/javascript" src="jquery.digilib.sliders.js"></script>
+        <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
+        <script type="text/javascript" src="jquery.digilib.marks.js"></script>
+        <script type="text/javascript" src="jquery.digilib.transparent.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+
+        <script type="text/javascript">
+            $(document).ready(function(){
+                var opts = {
+                    interactionMode : 'fullscreen',
+                    showRegionNumbers : false,
+                    };
+                var $div = $('div#digilib');
+                $div.digilib(opts);
+            });
+
+        </script>
+    </head>
+
+    <body>
+        <div id="digilib">
+            <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p>
+            <img src="http://digilib.berlios.de/images/digilib-logo-big.png" />
+        </div>
+    </body>
+</html>
+