Powerful and Multi-Functional jQuery Lightbox Plugin - Magnific Popup

Magnific Popup is a simple but powerful jQuery plugin that aims to create high performance and multi-functional lightboxs for your projects. 

Features:

• Lightweigt and easy to use
• Smart and fast
• Retina ready
• CSS3 transitions supported
• Supports for any html elements like image, video, ajax content, etc

Basic Usage:

1. Include jQuery library and Magnific Popup Plugin in the header of your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dist/jquery.magnific-popup.js"></script>

2. Include magnific-popup.css to style your plugin

<link href="dist/magnific-popup.css" rel="stylesheet" type="text/css">

3. The Html

<a class="image-popup-vertical-fit" href="1.jpg" title="Title 1">
<img src="1.jpg" width="75" height="75"> 
</a>

4. Call the plugin

<script>
$(document).ready(function() {

	$('.image-popup-vertical-fit').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		mainClass: 'mfp-img-mobile',
		image: {
			verticalFit: true
		}
		
	});

});
</script>

Change Log:

v0.9.9 (2013-10-26)

• Popup instance object is now available even before the first $.fn.magnificPopup call.
• Methods _onFocusIn and _setFocus are now public, to allow overriding.

v0.9.8 (2013-10-26)

• Added figure and figcaption elements to image markup.
• To avoid "jump" of content background, gap from right side (that "replaces" the scrollbar) is added with help of margin, instead of padding.
• Function that checks if the clicked element should close popup or not is now public (so it can be overridden with your own logic).
• Working on a new module: the exact copy of native fullscreen Android/iOS gallery, with touch/zoom/pan e.t.c., will publish branch soon (©Blizzard).

v0.9.7 (2013-10-10)

• CSS: removed outline on buttons.
• Allow multiple string tokens to be passed in gallery variables like %curr% of %total% and %title% .
• A few small changes to Grunt build, grunt-contrib-sass > grunt-sass. 

v0.9.6 (2013-09-30)

• Fixed bug: options object that you pass to popup gets modified after the initialization
• Fixed bug: zoom module creates global variable.
• Fixed bug: gallery from AJAX popups stacks content if it's switched before loading has finished.
• Indented and combined SCSS classes (thanks to @nschonni).
• $.magnificPopup.close() now doesn't throw an exception if there's no instance (thanks to @mjlescano).

v0.9.5 (2013-08-22)

• Fixed bug: built-in tab focus in popup works incorrectly (caused by 0.9.3 update).
• Fixed bug: error in IE7 when minified version of script is used with some versions of jQuery.
• Fixed bug: DOM exception in Chrome when using gallery mode with some versions of jQuery.

v0.9.3 (2013-07-17)

• Fixed blurry arrows in FF (#142)
• Added lazyLoadError callback.
• Popup now prevents closing if the clicked element is remvoved from DOM.
• overflow:hidden is now applied to html instead of body.
• Increased default z-index to from 500 to 1040.

v0.9.0 (2013-07-03)

• Added modal option which disables all default ways to close the popup, learn more in docs. 
• Added beforeClose event.
• Added imageLoadComplete event.
• Removed jQuery event alias calls. 
• Cleaned some duplicate styles in CSS. 

v0.8.9 (2013-06-05)

• Fix: inline element that is created dynamically causes exception in jQuery 1.8.x.
• Fix: incorrect detection of _hasScrollBar if body has defined height style.
• Fix: body styles are kept after popup is closed.
• Fix: close icon is aligned incorrectly with iframe type.
• responseText is deprected. Argument of callback parseAjax - obj.responseText is now deprected, but you can still access it via obj.xhr.responseText. Instead of it, please use obj.data to modify your output.
• Sass: changed variables to be default declarations to support front-loaded settings. i.e. You can override options by adding _settings.scss file near main.scss with your new options.
• Added: afterClose event.
• Added: ajaxContentLoaded event.
• Added: Bower support.

v0.8.8 (2013-05-25)

• Fix: you can now put link inside popup that will open another popup.
• Fix: incorrect index when opening popup that is already opened from multiple DOM elements.

v0.8.7 (2013-05-19)

• Fixed #62 - IE9 HTML5 YouTube player playing audio after pop up closed.

v0.8.6 (2013-05-18)

• Controls are now removed when there is only one element in gallery.
• Fixed issue that could cause incorrect main event element.
• Public property items is now always an array (previously it could be jQuery object collection).
• Added word-break: break-word to caption.

v0.8.5 (2013-05-15)

• Fix #43 - In IE8 whole window becomes black when YouTube iframe is closed
• Fix #51 - In IE9 YouTube HTML5 video keeps playing after iframe is removed from page
• Bugfix - box-sizing on IMG in low IE behaves incorrectly
• Fix #57 - padding on body is not added with overflow:Y:'scroll'
• removalDelay option is now ignored in IE
• Added an option closeOnBgClick
• Added BeforeChange callback
• Added AfterChange callback

 

---

This awesome jQuery plugin is developed by dimsemenov. For more Advanced Usages, please check the demo page or visit the official website.