/Magnific-Popup

Light and responsive lightbox plugin with focus on performance.

Primary LanguageJavaScriptMIT LicenseMIT

Magnific Popup Repository

Fast, light and responsive lightbox plugin, for jQuery and Zepto.js.

Optionally, install via Bower: bower install magnific-popup.

Location of stuff

  • 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).

Build

To compile Magnific Popup by yourself, first of make sure that you have Node.js, Grunt.js, Ruby and Jekyll installed, then:

  1. Copy repository

    git clone https://github.com/dimsemenov/Magnific-Popup.git

  2. Go inside Magnific Popup folder that you fetched and install Node dependencies

    cd Magnific-Popup && npm install

  3. Now simply run grunt to generate JS and CSS in folder dist and site in folder _site/.

    grunt

Optionally:

  • Run grunt watch to automatically rebuild script when you change files in src/ or in website/.
  • 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 in dist/.

Changelog

0.9.3 (Jul 16, 2013)

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

0.9.2 (Jul 5, 2013)

  • Fixed bug in new zoom module, that could cause incorrect calculation of image height, when jQuery is used instead of Zepto.

0.9.1 (Jul 4, 2013)

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

0.9.0 (Jul 3, 2013)

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

0.8.9 (Jun 4, 2013)

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

0.8.8 (May 24, 2013)

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

0.8.7 (May 19, 2013)

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

0.8.6 (May 18, 2013)

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

0.8.5 (May 15, 2013)

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

0.8.4 (May 13, 2013)

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

0.8.3 (May 9, 2013)

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

0.8.2 (May 5, 2013)

  • Added !important to mfp-hide class.
  • Fix gallery rendering issue in Opera.
  • Fix padding to body with overflow:scroll.

License

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.