Fast, light and responsive lightbox plugin, for jQuery and Zepto.js.
- Documentation and getting started guide
- Examples and plugin home page
- More examples in official CodePen collection. Feel free to email me more pen's with unusual usage of the script.
Optionally, install via Bower: bower install magnific-popup
.
- Generated popup JS and CSS files are in folder dist/. (Online build tool is on documentation page).
- Source files are in folder src/. They include Sass CSS file and js parts (edit them if you wish to submit commit).
- Website (examples & documentation) is in folder website/.
- Documentation page itself is in website/documentation.md (contributions to it are very welcome).
To compile Magnific Popup by yourself, first of make sure that you have Node.js, Grunt.js, Ruby and Jekyll installed, then:
-
Copy repository
git clone https://github.com/dimsemenov/Magnific-Popup.git
-
Go inside Magnific Popup folder that you fetched and install Node dependencies
cd Magnific-Popup && npm install
-
Now simply run
grunt
to generate JS and CSS in folderdist
and site in folder_site/
.grunt
Optionally:
- Run
grunt watch
to automatically rebuild script when you change files insrc/
or inwebsite/
. - If you don't have and don't want to install Jekyll, run
grunt nosite
to just build JS and CSS files related to popup indist/
.
- Fixed bug in new zoom module, that could cause incorrect calculation of image height, when jQuery is used instead of Zepto.
- Added zoom module effect for images, go to Magnific Popup website to view demos. More info in docs.
removalDelay
now applies only when browser supports CSS transitions.- Fix: removed tiny blink when switching between gallery images, or opening images that are already cached.
- Changed the default appearance of gallery arrows (now its white triangle with black border, was vice-versa).
- Added solid background to the image when its loading.
- Added
modal
option which disables all default ways to close the popup, learn more in docs. Thanks to Julen Ruiz Aizpuru. - Added
beforeClose
event. - Added
imageLoadComplete
event. - Removed jQuery event alias calls. Thanks to Albert Casademont.
- Cleaned some duplicate styles in CSS. Thanks to Yann Abgrall.
- 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 viaobj.xhr.responseText
. Instead of it, please useobj.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 nearmain.scss
with your new options. - Added:
afterClose
event. - Added:
ajaxContentLoaded
event. - Added: Bower support.
- Fix: you can now put link inside popup that will open another popup - http://codepen.io/dimsemenov/pen/hwIng
- Fix: incorrect index when opening popup that is already opened from multiple DOM elements.
- Fixed #62 - IE9 HTML5 YouTube player playing audio after pop up closed
- 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.
- 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 overflowY:'scroll'.
- removalDelay option is now ignored in IE.
- Added an option closeOnBgClick.
- Added BeforeChange callback.
- Added AfterChange callback.
- You can now call any public method directly from jQuery DOM element, e.g.:
$('.some-el-with-popup').magnificPopup('methodName', /*, arguments */)
. - Optimized inline module. Now target element is replaced with placeholder only when it has a defined parent node.
inline
type is now set as a default, so you may skip it.- Now content is just replaced when you call
open()
on popup that is already opened.
- Added:
goTo
public method. - Custom events that are added to popup are now not lost when navigating through gallery.
- If
delegate
option is used, events are now dispatched on main element instead of children.
- Added !important to mfp-hide class.
- Fix gallery rendering issue in Opera.
- Fix padding to body with overflow:scroll.
Script is MIT licensed and free and will always be kept this way. But has a small restriction from me - please do not create public WordPress plugin based on it(or at least contact me before creating it), because I will make it and it'll be open source too (want to get notified?).
Created by @dimsemenov & contributors.