Mercurial > hg > digilib

changeset 1466:45173d76aad5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
button and arrow images are now a single sprite. -sprite.png and -sprite.css are re-generated with "mvn -Pcreate-sprites".
author robcast
date Mon, 16 Nov 2015 20:22:20 +0100
parents 091cd46e1f76
children 0d22e54092ae
files .hgignore webapp/pom.xml webapp/src/main/webapp/jquery/digilib-ann.html webapp/src/main/webapp/jquery/digilib-auth.html webapp/src/main/webapp/jquery/digilib-dbg.html webapp/src/main/webapp/jquery/digilib-tg.html webapp/src/main/webapp/jquery/digilib-vector.html webapp/src/main/webapp/jquery/img/dl-buttons-full-32-sprite.png webapp/src/main/webapp/jquery/jquery.digilib.arrows.js webapp/src/main/webapp/jquery/jquery.digilib.buttons-full-32-sprite.css webapp/src/main/webapp/jquery/jquery.digilib.buttons-full-32.css webapp/src/main/webapp/jquery/jquery.digilib.buttons.js webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.js
diffstat 14 files changed, 838 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/.hgignore	Mon Nov 16 16:00:04 2015 +0100
+++ b/.hgignore	Mon Nov 16 20:22:20 2015 +0100
@@ -123,4 +123,10 @@
 syntax: regexp
 ^webapp/src/main/webapp/jquery/jquery\.cookie-range\.min\.js$
 syntax: regexp
-^webapp/src/main/webapp/jquery/jquery\.digilib-basic\.min\.js$
\ No newline at end of file
+^webapp/src/main/webapp/jquery/jquery\.digilib-basic\.min\.js$
+syntax: regexp
+^webapp/src/main/webapp/jquery/jquery\.digilib-basic\.css$
+syntax: regexp
+^webapp/src/main/webapp/jquery/jquery\.digilib-basic\.js$
+syntax: regexp
+^webapp/src/main/webapp/jquery/jquery\.digilib-basic\.min\.css$
\ No newline at end of file
--- a/webapp/pom.xml	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/pom.xml	Mon Nov 16 20:22:20 2015 +0100
@@ -16,6 +16,7 @@
 	
 	<properties>
         <skipTests>true</skipTests>
+        <servletapi>3</servletapi>
     </properties>
 
 	<build>
@@ -77,6 +78,7 @@
 							<cssSourceDir>jquery</cssSourceDir>
 							<cssSourceFiles>
 								<cssSourceFile>jquery.digilib.css</cssSourceFile>
+                                <cssSourceFile>jquery.digilib.buttons-full-32-sprite.css</cssSourceFile>
 								<cssSourceFile>jquery.range.css</cssSourceFile>
 							</cssSourceFiles>
 							<cssFinalFile>jquery.digilib-basic.css</cssFinalFile>
@@ -111,6 +113,7 @@
                             <cssSourceDir>jquery</cssSourceDir>
                             <cssSourceFiles>
                                 <cssSourceFile>jquery.digilib.css</cssSourceFile>
+                                <cssSourceFile>jquery.digilib.buttons-full-32-sprite.css</cssSourceFile>
                                 <cssSourceFile>jquery.range.css</cssSourceFile>
                             </cssSourceFiles>
                             <cssFinalFile>jquery.digilib-ann.css</cssFinalFile>
@@ -265,6 +268,37 @@
                 </dependency>
             </dependencies>
         </profile>
+        <profile>
+            <id>create-sprites</id>
+            <!-- create the button image sprite and CSS file -->
+			<build>
+				<plugins>
+					<plugin>
+						<groupId>net.jangaroo</groupId>
+						<artifactId>smartsprites-maven-plugin</artifactId>
+						<version>1.8</version>
+						<configuration>
+							<rootDirPath>src/main/webapp/jquery</rootDirPath>
+							<outputDirPath>${basedir}/src/main/webapp/jquery/</outputDirPath>
+							<logLevel>INFO</logLevel>
+							<spritePngDepth>AUTO</spritePngDepth>
+							<spritePngIeSix>false</spritePngIeSix>
+							<cssFileEncoding>UTF-8</cssFileEncoding>
+							<cssFileSuffix>-sprite</cssFileSuffix>
+						</configuration>
+						<executions>
+							<execution>
+								<id>createSprites</id>
+								<phase>generate-resources</phase>
+								<goals>
+									<goal>createSprites</goal>
+								</goals>
+							</execution>
+						</executions>
+					</plugin>
+				</plugins>
+			</build>
+        </profile>
 	</profiles>
 	<dependencies>
 		<dependency>
--- a/webapp/src/main/webapp/jquery/digilib-ann.html	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/digilib-ann.html	Mon Nov 16 20:22:20 2015 +0100
@@ -15,6 +15,7 @@
         <script type="text/javascript" src="jquery.cookie.js"></script>
         <script type="text/javascript" src="jquery.digilib.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.buttons-full-32-sprite.css" />
         <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>
--- a/webapp/src/main/webapp/jquery/digilib-auth.html	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/digilib-auth.html	Mon Nov 16 20:22:20 2015 +0100
@@ -26,6 +26,7 @@
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
         <script type="text/javascript" src="jquery.digilib.auth.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.buttons-full-32-sprite.css" />
 
         <script type="text/javascript">
             $(document).ready(function(){
--- a/webapp/src/main/webapp/jquery/digilib-dbg.html	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/digilib-dbg.html	Mon Nov 16 20:22:20 2015 +0100
@@ -25,6 +25,7 @@
         <script type="text/javascript" src="jquery.digilib.marks.js"></script>
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.buttons-full-32-sprite.css" />
 
         <script type="text/javascript">
             $(document).ready(function(){
--- a/webapp/src/main/webapp/jquery/digilib-tg.html	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/digilib-tg.html	Mon Nov 16 20:22:20 2015 +0100
@@ -25,6 +25,7 @@
         <script type="text/javascript" src="jquery.digilib.marks.js"></script>
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.buttons-full-32-sprite.css" />
 
         <script type="text/javascript">
             $(document).ready(function(){
--- a/webapp/src/main/webapp/jquery/digilib-vector.html	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/digilib-vector.html	Mon Nov 16 20:22:20 2015 +0100
@@ -26,6 +26,7 @@
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
         <script type="text/javascript" src="jquery.digilib.vector.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.buttons-full-32-sprite.css" />
 
         <script type="text/javascript">
             $(document).ready(function(){
Binary file webapp/src/main/webapp/jquery/img/dl-buttons-full-32-sprite.png has changed
--- a/webapp/src/main/webapp/jquery/jquery.digilib.arrows.js	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.arrows.js	Mon Nov 16 20:22:20 2015 +0100
@@ -187,9 +187,9 @@
         // button properties
         var action = buttonConfig.onclick;
         var tooltip = buttonConfig.tooltip;
-        var icon = imagePath + buttonConfig.icon;
+        var iconId = buttonConfig.icon.slice(0, -4);
         // construct the button html
-        var $button = $('<div class="'+cssPrefix+'keep"><a href=""><img class="'+cssPrefix+'button" src="' + icon + '"/></a></div>');
+        var $button = $('<div class="'+cssPrefix+'keep"><a href=""><div id="'+cssPrefix+'button-'+iconId+'-img"></div></a></div>');
         if (!show) {
             $button.hide();
         }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons-full-32-sprite.css	Mon Nov 16 20:22:20 2015 +0100
@@ -0,0 +1,421 @@
+
+#dl-button-addregion-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -0px;
+}
+
+#dl-button-annotation-mark-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -32px;
+}
+
+#dl-button-annotation-polygon-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -64px;
+}
+
+#dl-button-annotation-polyline-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -96px;
+}
+
+#dl-button-annotation-region-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -128px;
+}
+
+#dl-button-annotation-user-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -160px;
+}
+
+#dl-button-annotations-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -192px;
+}
+
+#dl-button-back-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -224px;
+}
+
+#dl-button-bg-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -256px;
+}
+
+#dl-button-birds-eye-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -258px;
+}
+
+#dl-button-brightness-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -290px;
+}
+
+#dl-button-buttons-less-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -322px;
+}
+
+#dl-button-buttons-more-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -354px;
+}
+
+#dl-button-calibration-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -386px;
+}
+
+#dl-button-cat-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -418px;
+}
+
+#dl-button-contrast-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -450px;
+}
+
+#dl-button-corona-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -482px;
+}
+
+#dl-button-delallregions-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -514px;
+}
+
+#dl-button-delmark-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -546px;
+}
+
+#dl-button-delregion-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -578px;
+}
+
+#dl-button-delregions-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -610px;
+}
+
+#dl-button-digilib-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -642px;
+}
+
+#dl-button-findcoords-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -674px;
+}
+
+#dl-button-findregion-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -706px;
+}
+
+#dl-button-first-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -738px;
+}
+
+#dl-button-fwd-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -770px;
+}
+
+#dl-button-help-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -802px;
+}
+
+#dl-button-info-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -834px;
+}
+
+#dl-button-last-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -866px;
+}
+
+#dl-button-mark-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -898px;
+}
+
+#dl-button-measure-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -930px;
+}
+
+#dl-button-mirror-horizontal-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -962px;
+}
+
+#dl-button-mirror-vertical-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -994px;
+}
+
+#dl-button-move-transparent-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1026px;
+}
+
+#dl-button-options-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1058px;
+}
+
+#dl-button-original-size-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1090px;
+}
+
+#dl-button-page-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1122px;
+}
+
+#dl-button-pagewidth-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1154px;
+}
+
+#dl-button-quality-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1186px;
+}
+
+#dl-button-reference-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1218px;
+}
+
+#dl-button-regioninfo-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1250px;
+}
+
+#dl-button-regions-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1282px;
+}
+
+#dl-button-reset-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1314px;
+}
+
+#dl-button-rgb-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1346px;
+}
+
+#dl-button-rotate-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1378px;
+}
+
+#dl-button-set-opacity-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1410px;
+}
+
+#dl-button-showregions-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1442px;
+}
+
+#dl-button-size-bigger-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1474px;
+}
+
+#dl-button-size-smaller-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1506px;
+}
+
+#dl-button-toggle-transparent-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1538px;
+}
+
+#dl-button-whitedisc-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1570px;
+}
+
+#dl-button-zoom-area-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1602px;
+}
+
+#dl-button-zoom-full-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1634px;
+}
+
+#dl-button-zoom-in-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1666px;
+}
+
+#dl-button-zoom-out-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1698px;
+}
+
+#dl-button-zoom-transparent-img {
+width: 32px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1730px;
+}
+
+#dl-button-up-img {
+width: 32px; 
+height: 16px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1762px;
+}
+
+#dl-button-down-img {
+width: 32px; 
+height: 16px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1778px;
+}
+
+#dl-button-left-img {
+width: 16px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1794px;
+}
+
+#dl-button-right-img {
+width: 16px; 
+height: 32px;
+  background-image: url('img/dl-buttons-full-32-sprite.png');
+  background-position: left -1826px;
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons-full-32.css	Mon Nov 16 20:22:20 2015 +0100
@@ -0,0 +1,362 @@
+/** sprite: dl-buttons; sprite-image: url('img/dl-buttons-full-32-sprite.png'); sprite-layout: vertical */
+
+#dl-button-addregion-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/addregion.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-annotation-mark-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/annotation-mark.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-annotation-polygon-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/annotation-polygon.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-annotation-polyline-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/annotation-polyline.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-annotation-region-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/annotation-region.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-annotation-user-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/annotation-user.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-annotations-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/annotations.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-back-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/back.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-bg-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/bg.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-birds-eye-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/birds-eye.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-brightness-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/brightness.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-buttons-less-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/buttons-less.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-buttons-more-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/buttons-more.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-calibration-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/calibration.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-cat-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/cat.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-contrast-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/contrast.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-corona-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/corona.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-delallregions-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/delallregions.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-delmark-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/delmark.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-delregion-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/delregion.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-delregions-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/delregions.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-digilib-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/digilib.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-findcoords-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/findcoords.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-findregion-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/findregion.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-first-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/first.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-fwd-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/fwd.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-help-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/help.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-info-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/info.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-last-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/last.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-mark-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/mark.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-measure-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/measure.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-mirror-horizontal-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/mirror-horizontal.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-mirror-vertical-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/mirror-vertical.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-move-transparent-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/move-transparent.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-options-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/options.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-original-size-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/original-size.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-page-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/page.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-pagewidth-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/pagewidth.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-quality-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/quality.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-reference-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/reference.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-regioninfo-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/regioninfo.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-regions-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/regions.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-reset-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/reset.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-rgb-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/rgb.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-rotate-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/rotate.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-set-opacity-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/set-opacity.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-showregions-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/showregions.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-size-bigger-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/size-bigger.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-size-smaller-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/size-smaller.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-toggle-transparent-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/toggle-transparent.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-whitedisc-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/whitedisc.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-zoom-area-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/zoom-area.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-zoom-full-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/zoom-full.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-zoom-in-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/zoom-in.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-zoom-out-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/zoom-out.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-zoom-transparent-img {
+width: 32px; 
+height: 32px;
+background-image: url(img/fullscreen/32/zoom-transparent.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-up-img {
+width: 32px; 
+height: 16px;
+background-image: url(img/fullscreen/32/up.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-down-img {
+width: 32px; 
+height: 16px;
+background-image: url(img/fullscreen/32/down.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-left-img {
+width: 16px; 
+height: 32px;
+background-image: url(img/fullscreen/32/left.png); /** sprite-ref: dl-buttons; */
+}
+
+#dl-button-right-img {
+width: 16px; 
+height: 32px;
+background-image: url(img/fullscreen/32/right.png); /** sprite-ref: dl-buttons; */
+}
+
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Mon Nov 16 20:22:20 2015 +0100
@@ -317,12 +317,12 @@
         // button properties
         var action = buttonConfig.onclick;
         var tooltip = buttonConfig.tooltip;
-        var icon = imagePath + buttonConfig.icon;
+        var iconId = buttonConfig.icon.slice(0, -4);
         // construct the button html
         var html = '\
             <div id="'+cssPrefix+'button-'+buttonName+'" class="'+cssPrefix+'button" title="'+tooltip+'">\
                 <a href="">\
-                    <img class="'+cssPrefix+'button" src="'+icon+'"/>\
+                    <div id="'+cssPrefix+'button-'+iconId+'-img"></div>\
                 </a>\
             </div>';
         var $button = $(html);
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Mon Nov 16 20:22:20 2015 +0100
@@ -372,6 +372,10 @@
 	z-index: 200;
 }
 
+div.dl-digilib.dl-fullscreen div.dl-buttons div.dl-button {
+	margin-bottom: 3px;
+}
+
 div.dl-digilib.dl-fullscreen div.dl-buttons div.dl-button:hover {
 	background-image: url('img/fullscreen/corona.png');
 	background-repeat: no-repeat;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Mon Nov 16 16:00:04 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Mon Nov 16 20:22:20 2015 +0100
@@ -45,7 +45,7 @@
 
     var defaults = {
         // version of this script
-        'version' : 'jquery.digilib.js 2.3.7b',
+        'version' : 'jquery.digilib.js 2.3.7c',
         // logo url
         'logoUrl' : 'img/digilib-logo-text1.png',
         // homepage url (behind logo)