Implement fullScreen toggle mode for blueimp gallery plugin

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

@@ -163,11 +163,23 @@
 .blueimp-gallery-playing > .play-pause {
   background-position: -15px 0;
 }
+.blueimp-gallery > .fullscreen {
+  position: absolute;
+  right: 15px;
+  bottom: 30px;
+  width: 15px;
+  height: 15px;
+  background: url(../img/fullscreen.png) 0 0 no-repeat;
+  cursor: pointer;
+  opacity: 0.5;
+  display:none;
+}
 .blueimp-gallery > .prev:hover,
 .blueimp-gallery > .next:hover,
 .blueimp-gallery > .close:hover,
 .blueimp-gallery > .title:hover,
-.blueimp-gallery > .play-pause:hover {
+.blueimp-gallery > .play-pause:hover,
+.blueimp-gallery > .fullscreen:hover{
   color: #fff;
   opacity: 1;
 }
@@ -175,7 +187,8 @@
 .blueimp-gallery-controls > .next,
 .blueimp-gallery-controls > .close,
 .blueimp-gallery-controls > .title,
-.blueimp-gallery-controls > .play-pause {
+.blueimp-gallery-controls > .play-pause,
+.blueimp-gallery-controls > .fullscreen{
   display: block;
   /* Fix z-index issues (controls behind slide element) on Android: */
   -webkit-transform: translateZ(0);
@@ -195,7 +208,8 @@
 .blueimp-gallery > .prev,
 .blueimp-gallery > .next,
 .blueimp-gallery > .close,
-.blueimp-gallery > .play-pause {
+.blueimp-gallery > .play-pause,
+.blueimp-gallery > .fullscreen{
   -webkit-user-select: none;
    -khtml-user-select: none;
      -moz-user-select: none;

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

@@ -91,6 +91,8 @@
             closeClass: 'close',
             // The class for the "play-pause" toggle control:
             playPauseClass: 'play-pause',
+			// The class fullscreen button control
+			fullscreenClass:'fullscreen',
             // The list object property (or data attribute) with the object type:
             typeProperty: 'type',
             // The list object property (or data attribute) with the object title:
@@ -113,6 +115,8 @@
             toggleControlsOnReturn: true,
             // Toggle the automatic slideshow interval on pressing the Space key:
             toggleSlideshowOnSpace: true,
+			// Toggle fullscreen mode when slideshow is running
+			toggleFullscreenOnSlideShow: true,
             // Navigate the gallery by pressing left and right on the keyboard:
             enableKeyboardNavigation: true,
             // Close the gallery on pressing the Esc key:
@@ -865,6 +869,10 @@
                 // Click on "play-pause" control
                 this.preventDefault(event);
                 this.toggleSlideshow();
+            }else if (isTarget(options.fullscreenClass)) {
+                // Click on "fullscreen" control
+                this.preventDefault(event);
+                this.toggleFullscreen();
             } else if (parent === this.slidesContainer[0]) {
                 // Click on slide background
                 this.preventDefault(event);
@@ -1128,11 +1136,25 @@
         toggleSlideshow: function () {
             if (!this.interval) {
                 this.play();
+				if (this.options.toggleFullscreenOnSlideShow) this.requestFullScreen(this.container[0]);
             } else {
                 this.pause();
+				if (this.options.toggleFullscreenOnSlideShow) this.exitFullScreen();
             }
         },
 
+		toggleFullscreen: function ()
+		{
+            if (!this.getFullScreenElement())
+			{
+				this.requestFullScreen(this.container[0]);
+			}
+			else
+			{
+				this.exitFullScreen();
+			}
+		},
+
         getNodeIndex: function (element) {
             return parseInt(element.getAttribute('data-index'), 10);
         },
@@ -1338,4 +1360,4 @@
     });
 
     return Gallery;
-}));
+}));