Powerful and Multi-Functional jQuery Lightbox Plugin - Magnific Popup

File Size: 344KB
Views Total: 24966
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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. 


  • 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"> 

4. Call the plugin

$(document).ready(function() {

		type: 'image',
		closeOnContentClick: true,
		mainClass: 'mfp-img-mobile',
		image: {
			verticalFit: true


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.