From 20c482cc8750eebf943e72953bb3fb69aeaa06e3 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Wed, 28 Jan 2015 17:45:10 +0000
Subject: [PATCH] Set thumbnailWithImgTag to true to get thumbnail indicators
 as img tag in order to be able to set right image size ratio

---
 etemplate/js/expose.js                     |  2 ++
 etemplate/templates/default/etemplate2.css | 42 ++++++++++++----------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/etemplate/js/expose.js b/etemplate/js/expose.js
index 5f01571ce4..e7fdec50b6 100644
--- a/etemplate/js/expose.js
+++ b/etemplate/js/expose.js
@@ -307,6 +307,8 @@ function expose (widget)
 					thumbnailProperty: 'thumbnail',
 					// Defines if the gallery indicators should display a thumbnail:
 					thumbnailIndicators: true,
+					//thumbnail with image tag
+					thumbnailWithImgTag: true,
 					// Callback function executed when the Gallery is initialized.
 					// Is called with the gallery instance as "this" object:
 					onopen: jQuery.proxy(this.expose_onopen,this),
diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css
index 1e91229646..7843f8cbcf 100644
--- a/etemplate/templates/default/etemplate2.css
+++ b/etemplate/templates/default/etemplate2.css
@@ -1774,36 +1774,40 @@ span.et2_egw_action_ddHelper_itemsCnt {
 /*Carousel thumbnails*/
 .blueimp-gallery>.indicator>li {
 	display: inline-block;
-	width: 134px;
+	width: auto;
 	height: 100px;
-	margin: none;
-	-webkit-box-sizing: content-box;
-	-moz-box-sizing: content-box;
-	box-sizing: content-box;
-	border: 1px solid transparent;
-	background: #ccc;
-	background: rgba(255, 255, 255, 0.17)center no-repeat;
-	border-radius: 5px;
-	box-shadow: 0 0 2px #000;
+	margin: 0;
+	background: transparent;
 	opacity: 1;
 	cursor: pointer;
-	background-repeat: no-repeat;
-	margin: 1px;
+	border-radius: 0;
 	border:0;
-	background-size: content;
 }
+
+.blueimp-gallery > .indicator > li > img {
+  display: inline-block;
+  width: auto;
+  height: 100px;
+  margin:0;
+  cursor: pointer;
+  z-index: -1;
+  position: relative;
+}
+
 /*Thumbnail border on hover*/
 .blueimp-gallery>.indicator>li:hover {
-	-webkit-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1);
-	-moz-box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1);
-	box-shadow: inset 0px 1px 0px 4px rgba(255, 255, 255, 1);
+	-webkit-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
+	-moz-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
+	box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
+	background: transparent;
 }
 /*Active thumbnail border*/
 .blueimp-gallery>.indicator>.active
 {
-	-webkit-box-shadow: inset 0px 1px 0px 4px #0c5da5;
-	-moz-box-shadow: inset 0px 1px 0px 4px #0c5da5;
-	box-shadow: inset 0px 1px 0px 4px #0c5da5;
+	-webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5;
+	-moz-box-shadow: inset 0px 0px 0px 4px #0c5da5;
+	box-shadow: inset 0px 0px 0px 4px #0c5da5;
+	background: transparent;
 }
 /*Slideshow Play/Pause button*/
 .blueimp-gallery>.play-pause{