0.9.8

Author: dimsemenov

README.md

@@ -41,6 +41,14 @@ Optionally:
 
 ## Changelog
 
+
+### 0.9.8 (Oct 26, 2013)
+
+- Added figure and figcaption elements to image markup (#233, thanks to @pjackson28).
+- To avoid "jump" of content background, gap from right side (that "replaces" the scrollbar) is added with help of `margin`, instead of `padding`, (closes #125, thanks to @chodorowicz).
+- Function that checks if the clicked element should close popup or not is now public (so it can be overriden with your own logic), e.g. `$.magnificPopup.proto._checkIfClose = function(clickedTarget) { /* your logic, return true if close, clickedTarget is the element that was clicked. */ return true; };`.
+- Working on a new module: the exact copy of native iOS gallery, with touch/zoom/pan e.t.c., will publish branch soon :)
+
 ### 0.9.7 (Oct 10, 2013)
 
 - CSS: removed outline on buttons (thanks to @OriginalEXE).

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "magnific-popup",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "main": [
     "dist/jquery.magnific-popup.js",
     "dist/magnific-popup.css"

dist/jquery.magnific-popup.js

@@ -1,4 +1,4 @@
-/*! Magnific Popup - v0.9.7 - 2013-10-10
+/*! Magnific Popup - v0.9.8 - 2013-10-26
 * http://dimsemenov.com/plugins/magnific-popup/
 * Copyright (c) 2013 Dmitry Semenov; */
 ;(function($) {
@@ -94,41 +94,6 @@ var _mfpOn = function(name, f) {
 			$.magnificPopup.instance = mfp;
 		}
 	},
-	// Check to close popup or not
-	// "target" is an element that was clicked
-	_checkIfClose = function(target) {
-
-		if($(target).hasClass(PREVENT_CLOSE_CLASS)) {
-			return;
-		}
-
-		var closeOnContent = mfp.st.closeOnContentClick;
-		var closeOnBg = mfp.st.closeOnBgClick;
-
-		if(closeOnContent && closeOnBg) {
-			return true;
-		} else {
-
-			// We close the popup if click is on close button or on preloader. Or if there is no content.
-			if(!mfp.content || $(target).hasClass('mfp-close') || (mfp.preloader && target === mfp.preloader[0]) ) {
-				return true;
-			}
-
-			// if click is outside the content
-			if(  (target !== mfp.content[0] && !$.contains(mfp.content[0], target))  ) {
-				if(closeOnBg) {
-					// last check, if the clicked element is in DOM, (in case it's removed onclick)
-					if( $.contains(document, target) ) {
-						return true;
-					}
-				}
-			} else if(closeOnContent) {
-				return true;
-			}
-
-		}
-		return false;
-	},
 	// CSS transition detection, http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
 	supportsTransitions = function() {
 		var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
@@ -254,7 +219,7 @@ MagnificPopup.prototype = {
 			});
 
 			mfp.wrap = _getEl('wrap').attr('tabindex', -1).on('click'+EVENT_NS, function(e) {
-				if(_checkIfClose(e.target)) {
+				if(mfp._checkIfClose(e.target)) {
 					mfp.close();
 				}
 			});
@@ -349,7 +314,7 @@ MagnificPopup.prototype = {
             if(mfp._hasScrollBar(windowHeight)){
                 var s = mfp._getScrollbarSize();
                 if(s) {
-                    windowStyles.paddingRight = s;
+                    windowStyles.marginRight = s;
                 }
             }
         }
@@ -379,7 +344,7 @@ MagnificPopup.prototype = {
 		_mfpTrigger('BuildControls');
 
 
-		// remove scrollbar, add padding e.t.c
+		// remove scrollbar, add margin e.t.c
 		$('html').css(windowStyles);
 
 		// add everything to DOM
@@ -456,7 +421,7 @@ MagnificPopup.prototype = {
 		mfp._removeClassFromMFP(classesToRemove);
 
 		if(mfp.fixedContentPos) {
-			var windowStyles = {paddingRight: ''};
+			var windowStyles = {marginRight: ''};
 			if(mfp.isIE7) {
 				$('body, html').css('overflow', '');
 			} else {
@@ -751,6 +716,41 @@ MagnificPopup.prototype = {
 	/*
 		"Private" helpers that aren't private at all
 	 */
+	// Check to close popup or not
+	// "target" is an element that was clicked
+	_checkIfClose: function(target) {
+
+		if($(target).hasClass(PREVENT_CLOSE_CLASS)) {
+			return;
+		}
+
+		var closeOnContent = mfp.st.closeOnContentClick;
+		var closeOnBg = mfp.st.closeOnBgClick;
+
+		if(closeOnContent && closeOnBg) {
+			return true;
+		} else {
+
+			// We close the popup if click is on close button or on preloader. Or if there is no content.
+			if(!mfp.content || $(target).hasClass('mfp-close') || (mfp.preloader && target === mfp.preloader[0]) ) {
+				return true;
+			}
+
+			// if click is outside the content
+			if(  (target !== mfp.content[0] && !$.contains(mfp.content[0], target))  ) {
+				if(closeOnBg) {
+					// last check, if the clicked element is in DOM, (in case it's removed onclick)
+					if( $.contains(document, target) ) {
+						return true;
+					}
+				}
+			} else if(closeOnContent) {
+				return true;
+			}
+
+		}
+		return false;
+	},
 	_addClassToMFP: function(cName) {
 		mfp.bgOverlay.addClass(cName);
 		mfp.wrap.addClass(cName);
@@ -1153,11 +1153,15 @@ $.magnificPopup.registerModule('image', {
 	options: {
 		markup: '<div class="mfp-figure">'+
 					'<div class="mfp-close"></div>'+
-					'<div class="mfp-img"></div>'+
-					'<div class="mfp-bottom-bar">'+
-						'<div class="mfp-title"></div>'+
-						'<div class="mfp-counter"></div>'+
-					'</div>'+
+					'<figure>'+
+						'<div class="mfp-img"></div>'+
+						'<figcaption>'+
+							'<div class="mfp-bottom-bar">'+
+								'<div class="mfp-title"></div>'+
+								'<div class="mfp-counter"></div>'+
+							'</div>'+
+						'</figcaption>'+
+					'</figure>'+
 				'</div>',
 		cursor: 'mfp-zoom-out-cur',
 		titleSrc: 'title', 

dist/jquery.magnific-popup.min.js

@@ -2,7 +2,7 @@
   "name": "magnific-popup",
   "title": "Magnific Popup",
   "description": "Fast, light, mobile-friendly and responsive lightbox and modal dialog plugin. Open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), photo gallery. In/out animation effects are added with CSS3 transitions.",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "homepage": "http://dimsemenov.com/plugins/magnific-popup/",
   "demo": "http://dimsemenov.com/plugins/magnific-popup/",
   "docs": "http://dimsemenov.com/plugins/magnific-popup/documentation.html",

magnific-popup.jquery.json

@@ -641,7 +641,7 @@ Markup of close button. %title% will be replaced with option `tClose`.
 
 ## Gallery
 
-Basically all galery module does is allows you to switch content of popup and adds navigation arrows. It can switch and mix any types of content, not just images. 
+Basically all galery module does is allows you to switch content of popup and adds navigation arrows. It can switch and mix any types of content, not just images. Gallery options: 
 
 {% highlight javascript %}
 gallery: {
@@ -659,20 +659,48 @@ gallery: {
 }
 {% endhighlight %}
 
+Example:
+
+{% highlight javascript %}
+// This will create a single gallery from all elements that have class "gallery-item"
+$('.gallery-item').magnificPopup({
+  type: 'image',
+  gallery:{
+    enabled:true
+  }
+});
+{% endhighlight %}
+
 ### Multiple galleries
 
-To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each seperate gallery. The below example can be used:
+To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each seperate gallery. For example
+
+{% highlight html %}
+<div class="gallery">
+    <a href="path-to-image.jpg">Open image 1 (gallery #1)</a>
+    <a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
+</div>
+<div class="gallery">
+    <a href="path-to-image.jpg">Open image 1 (gallery #2)</a>
+    <a href="path-to-image.jpg">Open image 2 (gallery #2)</a>
+    <a href="http://vimeo.com/123123" class="mfp-iframe">Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.</a>
+</div>
+{% endhighlight %}
 
 {% highlight javascript %}
-$('.gallery').each(function() { // the containers for all your galleries should have the class gallery
+$('.gallery').each(function() { // the containers for all your galleries
     $(this).magnificPopup({
-        delegate: 'a', // the container for each your gallery items
+        delegate: 'a', // the selector for gallery item
         type: 'image',
-        gallery:{enabled:true}
+        gallery: {
+          enabled:true
+        }
     });
 }); 
 {% endhighlight %}
 
+You don't necessarily need to use `delegate` option, it can be just `$(this).find('a').magnificPopup( ...`.
+
 ### Lazy-loading
 
 Lazy-loading option preloads nearby items. It accepts array with two integers, first one - is a number of items to preload before the current, second one - the number of images to preload after the current. For example `preload: [1,3]` will load 3 next items and 1 that is before current. These values are automatically switched based on direction of movement. 
@@ -1125,6 +1153,17 @@ $('.some-button').magnificPopup({
 
 See [example on CodePen](http://codepen.io/dimsemenov/pen/JGjHK).
 
+### How to override some function without modifying the source files?
+
+Rewrite the function that you wish to modify in Magnific Popup class prototype object, for example to override function that sets focus on some element (add this code after popup JS file is included, but before popup is initialized):
+
+{% highlight javascript %}
+$.magnificPopup.proto._setFocus = function() {
+  (mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus();
+};
+{% endhighlight %}
+
+
 <h2 id="contribute">Make Magnific Popup better!</h2>
 
 Improve this documentation page <a href="https://github.com/dimsemenov/Magnific-Popup/edit/master/website/documentation.md">via GitHub</a> (simply submit commit). Any improvements, including your own CodePen examples are very welcome.