Fast, light and responsive lightbox plugin, for jQuery and Zepto.js.
- Documentation and getting started guide.
- Examples and plugin home page.
- More examples in CodePen collection.
Optionally, install via Bower bower install magnific-popup
or npm: npm install magnific-popup
.
Ruby gem: gem install magnific-popup-rails
.
- WordPress plugin - under development.
- Drupal module.
- Concrete5 add-on.
- Redaxo add-on.
- Contao extension.
If you created an extension for some CMS, email me and I'll add it to this list.
- 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).
If you used Magnific Popup in some interesting way, or on site of popular brand, I'd be very grateful if you <a href="mailto:diiiimaaaa@gmail.com?subject="Site that uses Magnific Popup"">shoot me a link to it.
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/
.
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.