* Filemanager/Expose view: Fix following issues:

-Fix miss calculation of accurate position of active slide on thumbnail indicator
-Fix slide navigation with keyboard always pops up thumbnail indicator, no respect to fullscreen mode
-Fix jumping out of the fullscreen slide show by toggling on spacebar pause/play key
-Make the thumbnail indicator scrolling faster

etemplate/js/expose.js

@@ -227,7 +227,7 @@ function expose (widget)
 					// The class for all slides:
 					slideClass: 'slide',
 					// The slide class for loading elements:
-					slideLoadingClass: 'slide-loading',
+					slideLoadingClass: '',
 					// The slide class for elements that failed to load:
 					slideErrorClass: 'slide-error',
 					// The class for the content element loaded into each slide:
@@ -271,7 +271,7 @@ function expose (widget)
 					// Close the gallery on pressing the ESC key:
 					closeOnEscape: true,
 					// Close the gallery when clicking on an empty slide area:
-					closeOnSlideClick: true,
+					closeOnSlideClick: false,
 					// Close the gallery by swiping up or down:
 					closeOnSwipeUpOrDown: true,
 					// Emulate touch events on mouse-pointer devices such as desktop browsers:
@@ -303,6 +303,8 @@ function expose (widget)
 					transitionSpeed: 400,
 					//Hide controls when the slideshow is playing
 					hideControlsOnSlideshow: true,
+					//Request fullscreen on slide show
+					toggleFullscreenOnSlideShow:true,
 					// The transition speed for automatic slide changes, set to an integer
 					// greater 0 to override the default transition speed:
 					slideshowTransitionSpeed: undefined,
@@ -488,17 +490,10 @@ function expose (widget)
 					// See if we need to move the indicator
 					var indicator = gallery.container.find('.indicator');
 					var current = $j('.active',indicator).position();
-					if (current.left == 0 && !gallery.container.hasClass(this.expose_options.playingClass))
-					{
-						//As controlsClass activates indicators,
-						//we use it to make indicators available for the first time
-						//which helps to re-calculate the correct position of it, if it's not loaded yet
-						gallery.container.addClass(this.expose_options.controlsClass);
-						current = $j('.active',indicator).position();
-					}
+
 					if(current)
 					{
-						indicator.animate({left: (gallery.container.width() / 2)-current.left});
+						indicator.animate({left: (gallery.container.width() / 2)-current.left},10);
 					}
 				}
 			},

etemplate/templates/default/etemplate2.css

@@ -1765,43 +1765,63 @@ 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;
+}
+/*Make indicator visible all the time to be able accuratley estimate
+  current active slide position in thubmnal bar*/
+.blueimp-gallery>.indicator  {
+	opacity:0; /* Hide it through opacity*/
+	white-space: nowrap;
+	display: inline-block; /* Very important to keep gallery indicator always with display inline-block*/
 }
 /*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{
 	right: 42px;
 	top: 23px;
 }
+/*fullScreen button*/
+.blueimp-gallery>.fullscreen{
+	right: 75px;
+	top: 25px;
+}
 /*Give room to Carousel indicator when the gallery controls is on*/
 .blueimp-gallery-controls>.slides {
 	height:85%;
 }
+/*indicator bar with controls*/
+.blueimp-gallery-controls>.indicator {
+	white-space: nowrap;
+	opacity:1; /* When the controls panel is on then we need to show back the indicators*/
+}

phpgwapi/js/jquery/blueimp/js/blueimp-gallery.js

@@ -116,11 +116,13 @@
             // Toggle the automatic slideshow interval on pressing the Space key:
             toggleSlideshowOnSpace: true,
 			// Toggle fullscreen mode when slideshow is running
-			toggleFullscreenOnSlideShow: true,
+			toggleFullscreenOnSlideShow: false,
             // Navigate the gallery by pressing left and right on the keyboard:
             enableKeyboardNavigation: true,
             // Close the gallery on pressing the Esc key:
             closeOnEscape: true,
+			//Hide controls when the slideshow is playing
+			hideControlsOnSlideshow:false,
             // Close the gallery when clicking on an empty slide area:
             closeOnSlideClick: true,
             // Close the gallery by swiping up or down:
@@ -376,6 +378,7 @@
 
         play: function (time) {
             var that = this;
+			if (this.options.hideControlsOnSlideshow) this.container.removeClass(this.options.controlsClass);
             window.clearTimeout(this.timeout);
             this.interval = time || this.options.slideshowInterval;
             if (this.elements[this.index] > 1) {
@@ -1139,7 +1142,6 @@
 				if (this.options.toggleFullscreenOnSlideShow) this.requestFullScreen(this.container[0]);
             } else {
                 this.pause();
-				if (this.options.toggleFullscreenOnSlideShow) this.exitFullScreen();
             }
         },