Powerful and Multi-Functional jQuery Lightbox Plugin - Magnific Popup
File Size: | 344KB |
---|---|
Views Total: | 24030 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.