Collection of tweaks

- package.json main file points to uncompressed version; - new "onFullscreenChange" event; - it is now possible to make elements clickable by setting `data-selectable="true"`; - fixed issue when ajax response contains additional elements; - improved "hash" module;
fancyapps · Sep 18, 2017 · 8d2d48d · 8d2d48d
1 parent 60c3724
commit 8d2d48d
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 58 deletions.
diff --git a/dist/jquery.fancybox.css b/dist/jquery.fancybox.css
@@ -159,7 +159,7 @@
 .fancybox-slide--next {
   z-index: 99995; }
 
-.fancybox-slide > * {
+.fancybox-slide > div {
   display: inline-block;
   position: relative;
   padding: 24px;
@@ -188,7 +188,11 @@
   background-size: 100% 100%;
   background-repeat: no-repeat;
   -webkit-backface-visibility: hidden;
-  backface-visibility: hidden; }
+  backface-visibility: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
 
 .fancybox-can-zoomOut .fancybox-image-wrap {
   cursor: -webkit-zoom-out;
@@ -217,7 +221,11 @@
   padding: 0;
   border: 0;
   max-width: none;
-  max-height: none; }
+  max-height: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
 
 .fancybox-spaceball {
   z-index: 1; }
@@ -475,7 +483,7 @@
   opacity: 0.3; }
 
 /* Loading indicator */
-.fancybox-loading {
+.fancybox-slide > .fancybox-loading {
   border: 6px solid rgba(100, 100, 100, 0.4);
   border-top: 6px solid rgba(255, 255, 255, 0.6);
   border-radius: 100%;

diff --git a/dist/jquery.fancybox.js b/dist/jquery.fancybox.js
@@ -1,5 +1,5 @@
 // ==================================================
-// fancyBox v3.1.24
+// fancyBox v3.1.25
 //
 // Licensed GPLv3 for open source use
 // or fancyBox Commercial License for commercial use
@@ -1964,7 +1964,7 @@
             slide.$content = $( content ).appendTo( slide.$slide );
 
             if ( slide.opts.smallBtn && !slide.$smallBtn ) {
-                slide.$smallBtn = $( self.translate( slide, slide.opts.btnTpl.smallBtn ) ).appendTo( slide.$content );
+                slide.$smallBtn = $( self.translate( slide, slide.opts.btnTpl.smallBtn ) ).appendTo( slide.$content.filter('div').first() );
             }
 
             this.afterLoad( slide );
@@ -2629,7 +2629,7 @@
 
     $.fancybox = {
 
-        version  : "3.1.24",
+        version  : "3.1.25",
         defaults : defaults,
 
 
@@ -2971,7 +2971,7 @@
 
     $D.on( 'click.fb-start', '[data-fancybox]', _run );
 
-}( window, document, window.jQuery ));
+}( window, document, window.jQuery || jQuery ));
 
 // ==========================================================================
 //
@@ -3264,7 +3264,8 @@
 	};
 
 	var isClickable = function( $el ) {
-		if ( $el.is('a,button,input,select,textarea') || $.isFunction( $el.get(0).onclick ) ) {
+
+		if ( $el.is('a,button,input,select,textarea') || $.isFunction( $el.get(0).onclick ) || $el.data('selectable') ) {
 			return true;
 		}
 
@@ -3381,8 +3382,6 @@
 		$(document).on( isTouchDevice ? 'touchend.fb.touch touchcancel.fb.touch' : 'mouseup.fb.touch mouseleave.fb.touch',  $.proxy(self, "ontouchend"));
 		$(document).on( isTouchDevice ? 'touchmove.fb.touch' : 'mousemove.fb.touch',  $.proxy(self, "ontouchmove"));
 
-		e.stopPropagation();
-
 		if ( !(instance.current.opts.touch || instance.canPan() ) || !( $target.is( self.$stage ) || self.$stage.find( $target ).length ) ) {
 
 			// Prevent ghosting
@@ -3393,6 +3392,8 @@
 			return;
 		}
 
+		e.stopPropagation();
+
 		if ( !( $.fancybox.isMobile && ( isScrollable( self.$target ) || isScrollable( self.$target.parent() ) ) ) ) {
 			e.preventDefault();
 		}
@@ -4369,12 +4370,16 @@
 
 	// If browser does not have Full Screen API, then simply unset default button template and stop
 	if ( !fn ) {
-		$.fancybox.defaults.btnTpl.fullScreen = false;
+
+		if ( $ && $.fancybox ) {
+			$.fancybox.defaults.btnTpl.fullScreen = false;
+		}
 
 		return;
 	}
 
 	var FullScreen = {
+
 		request : function ( elem ) {
 
 			elem = elem || document.documentElement;
@@ -4472,6 +4477,8 @@
 			instance.update( true, true, 0 );
 		}
 
+		instance.trigger('onFullscreenChange', FullScreen.isFullscreen() );
+
 	});
 
 }(document, window.jQuery));
@@ -4793,7 +4800,7 @@
 	}
 
 	// Get gallery name from current instance
-	function getGallery( instance ) {
+	function getGalleryID( instance ) {
 		var opts;
 
 		if ( !instance ) {
@@ -4802,7 +4809,7 @@
 
 		opts = instance.current ? instance.current.opts : instance.opts;
 
-		return opts.$orig ? opts.$orig.data( 'fancybox' ) : ( opts.hash || '' );
+		return opts.hash || ( opts.$orig ? opts.$orig.data( 'fancybox' ) : ''  );
 	}
 
 	// Star when DOM becomes ready
@@ -4826,7 +4833,7 @@
 					}
 
 					url     = parseUrl();
-					gallery = getGallery( instance );
+					gallery = getGalleryID( instance );
 
 					// Make sure gallery start index matches index from hash
 					if ( gallery && url.gallery && gallery == url.gallery ) {
@@ -4838,11 +4845,11 @@
 				'beforeShow.fb' : function( e, instance, current ) {
 					var gallery;
 
-					if ( current.opts.hash === false ) {
+					if ( !current || current.opts.hash === false ) {
 						return;
 					}
 
-		            gallery = getGallery( instance );
+		            gallery = getGalleryID( instance );
 
 		            // Update window hash
 		            if ( gallery && gallery !== '' ) {
@@ -4886,7 +4893,7 @@
 						return;
 					}
 
-					gallery  = getGallery( instance );
+					gallery  = getGalleryID( instance );
 					origHash = instance && instance.opts.origHash ? instance.opts.origHash : '';
 
 		            // Remove hash from location bar
@@ -4916,8 +4923,6 @@
 						currentHash = null;
 
 						$.fancybox.close();
-
-						shouldCreateHistory = true;
 					}
 
 				} else if ( url.gallery !== '' ) {
@@ -4932,5 +4937,4 @@
 
     });
 
-
 }(document, window, window.jQuery));
diff --git a/dist/jquery.fancybox.min.css b/dist/jquery.fancybox.min.css
diff --git a/dist/jquery.fancybox.min.js b/dist/jquery.fancybox.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -333,6 +333,12 @@ <h3>
 				 jQuery 3+ is preferred, but fancyBox works with jQuery 1.9.1+ and jQuery 2+
 			</p>
 
+			<h4 class="important">Important</h4>
+
+			<p>
+				If you experience issues with image zooming, then update jQuery to the latest (at least v3.2.1).
+			</p>
+
 			<h3>Compatibility</h3>
 
 			<p>
@@ -739,7 +745,7 @@ <h2 id="embedding">Embedding</h2>
   Vimeo video
 &lt;/a&gt;
 
-&lt;a data-fancybox href=&quot;https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572&quot;&gt;
+&lt;a data-fancybox href=&quot;https://www.google.com/maps/search/Empire+State+Building/&quot;&gt;
 	Google Map
 &lt;/a&gt;
 
@@ -1214,7 +1220,7 @@ <h3 id="core_methods">Core methods</h3>
 
 
 				<pre><code>// Close only the currently active or all fancyBox instances
-$.fancybox.close( all );
+$.fancybox.close( true );
 
 // Open the fancyBox right away
 $.fancybox.open( items, opts, index );

diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@fancyapps/fancybox",
   "description": "Touch enabled, responsive and fully customizable jQuery lightbox script",
-  "version": "3.1.24",
+  "version": "3.1.25",
   "homepage": "http://fancyapps.com/fancybox/",
-  "main": "./dist/jquery.fancybox.min.js",
+  "main": "./dist/jquery.fancybox.js",
   "author": "fancyApps",
   "license": "GPL-3.0",
   "repository": {

diff --git a/src/css/core.css b/src/css/core.css
@@ -172,7 +172,7 @@
 	z-index: 99995;
 }
 
-.fancybox-slide > * {
+.fancybox-slide > div {
 	display: inline-block;
 	position: relative;
 	padding: 24px;
@@ -200,6 +200,7 @@
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	backface-visibility: hidden;
+	user-select: none;
 }
 
 .fancybox-can-zoomOut .fancybox-image-wrap {
@@ -230,6 +231,7 @@
 	border: 0;
 	max-width: none;
 	max-height: none;
+	user-select: none;
 }
 
  .fancybox-spaceball {
@@ -520,7 +522,7 @@
 
 /* Loading indicator */
 
-.fancybox-loading {
+.fancybox-slide > .fancybox-loading {
 	border: 6px solid rgba(100, 100, 100, .4);
 	border-top: 6px solid rgba(255, 255, 255, .6);
 	border-radius: 100%;

diff --git a/src/js/core.js b/src/js/core.js
@@ -1954,7 +1954,7 @@
             slide.$content = $( content ).appendTo( slide.$slide );
 
             if ( slide.opts.smallBtn && !slide.$smallBtn ) {
-                slide.$smallBtn = $( self.translate( slide, slide.opts.btnTpl.smallBtn ) ).appendTo( slide.$content );
+                slide.$smallBtn = $( self.translate( slide, slide.opts.btnTpl.smallBtn ) ).appendTo( slide.$content.filter('div').first() );
             }
 
             this.afterLoad( slide );
@@ -2961,4 +2961,4 @@
 
     $D.on( 'click.fb-start', '[data-fancybox]', _run );
 
-}( window, document, window.jQuery ));
+}( window, document, window.jQuery || jQuery ));
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
@@ -78,12 +78,16 @@
 
 	// If browser does not have Full Screen API, then simply unset default button template and stop
 	if ( !fn ) {
-		$.fancybox.defaults.btnTpl.fullScreen = false;
+
+		if ( $ && $.fancybox ) {
+			$.fancybox.defaults.btnTpl.fullScreen = false;
+		}
 
 		return;
 	}
 
 	var FullScreen = {
+
 		request : function ( elem ) {
 
 			elem = elem || document.documentElement;
@@ -181,6 +185,8 @@
 			instance.update( true, true, 0 );
 		}
 
+		instance.trigger('onFullscreenChange', FullScreen.isFullscreen() );
+
 	});
 
 }(document, window.jQuery));
diff --git a/src/js/guestures.js b/src/js/guestures.js
@@ -65,7 +65,8 @@
 	};
 
 	var isClickable = function( $el ) {
-		if ( $el.is('a,button,input,select,textarea') || $.isFunction( $el.get(0).onclick ) ) {
+
+		if ( $el.is('a,button,input,select,textarea') || $.isFunction( $el.get(0).onclick ) || $el.data('selectable') ) {
 			return true;
 		}
 
@@ -182,8 +183,6 @@
 		$(document).on( isTouchDevice ? 'touchend.fb.touch touchcancel.fb.touch' : 'mouseup.fb.touch mouseleave.fb.touch',  $.proxy(self, "ontouchend"));
 		$(document).on( isTouchDevice ? 'touchmove.fb.touch' : 'mousemove.fb.touch',  $.proxy(self, "ontouchmove"));
 
-		e.stopPropagation();
-
 		if ( !(instance.current.opts.touch || instance.canPan() ) || !( $target.is( self.$stage ) || self.$stage.find( $target ).length ) ) {
 
 			// Prevent ghosting
@@ -194,6 +193,8 @@
 			return;
 		}
 
+		e.stopPropagation();
+
 		if ( !( $.fancybox.isMobile && ( isScrollable( self.$target ) || isScrollable( self.$target.parent() ) ) ) ) {
 			e.preventDefault();
 		}