$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({ type: 'image', closeOnContentClick: true, mainClass: 'mfp-img-mobile', image: { verticalFit: true }
});
$('.image-popup-fit-width').magnificPopup({ type: 'image', closeOnContentClick: true, image: { verticalFit: false } });
$('.image-popup-no-margins').magnificPopup({ type: 'image', closeOnContentClick: true, closeBtnInside: false, fixedContentPos: true, mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side image: { verticalFit: true }, zoom: { enabled: true, duration: 300 // don't foget to change the duration also in CSS } });
});
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
/*
for zoom animation
uncomment this part if you haven’t added this code anywhere else
*/
/*
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
*/
Code above is dynamically generated directly from the source of this example.
Please read the documentation before using it.
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device
(for jQuery or Zepto.js).
Documentation · GitHub · WordPress plugin · Build tool · How it was made
Examples
Single image lightbox
Three simple popups with different scaling settings.
1 — fits horizontally and vertically,
2 — only horizontally,
3 — no gaps, zoom animation, close icon in top-right corner.
Lightbox gallery
You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check my article on the Smashing Magazine, or new PhotoSwipe script.
Zoom-gallery
If you wish to open the popup only after image is fully loaded, you may preload image via JS. Or use scaled down image instead of thumbnail. Zoom effect works only with images, for now.
Popup with video or map
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
Open YouTube video
Open Vimeo video
Open Google Map
Dialog with CSS animation
Animations are added with simple CSS transitions, you can make them look however you wish.
More animation effects on CodePen.
Open with fade-zoom animation
Open with fade-slide animation
Popup with form
Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.
Open form
Ajax popup
You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window – whatever.
Load content via ajax
Load another content via ajax
Modal popup
A modal popup disables the usual ways to close popups.
Open modal
Error handling
This is just basic example of how error messages are displayed. Surely, you can change text or style them.
Broken image
Broken ajax request
Don’t forget to check out my new article about this plugin on the Smashing Magazine.
What makes this plugin different?
Light and modular
You can choose to include only the features that you need using the online build tool or by compiling it yourself with Grunt.js. Size of core JS file is about 3KB + each module weighs about 0.5KB (gzipped). Sass CSS preprocessor is used for easier skinning, but you’re not obligated to use it.
Content is resized with CSS
The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not – feel free to use relative units like EM’s or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it’ll resize and center.
Fast
Magnific Popup displays images before they’re completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.
High-DPI (Retina) display support
Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays.
Conditional lightbox
Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Brad Frost has a terrific article about this technique.
Memory management
Popup has an extendable micro templating engine that reuses existing DOM elements (example), which is especially useful when your popups same pattern.
Browser support
Tested on desktop: Chrome, Safari, FF, Opera, IE8+, partial support of IE7 (works, but some visual layout features, like vertical centering, are missing). Mobile: default browser in Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile Opera and Chrome on Android. If you noticed any bug, please open an issue on GitHub
License
Script is available under MIT license and will always be kept this way.
But please do me a favor and do not create a public WordPress plugin based on it, because I will make it soon and it will be open souce too. (Want to get notified?).
Bugs & contributing
Please report bugs via GitHub and ask general questions through StackOverflow. Feel free to submit commit, even the tiniest contributions to the script or to the documentation are very welcome.
Special thanks to:
Lokesh Dhakar for original Lightbox script.
Chris Coyier for awesome CSS techniques.
Brad Frost for conditional lightbox technique.
Updates
If you wish to get notified about important plugin updates, you may star and watch the repository on GitHub, follow me on Twitter, or join my tiny Mailchimp email newsletter that I send 3-4 times a year.
Please spread the word if you find the plugin useful
Tweet! Like! +1
Created by Dmitry Semenov. Photography in demo by Marsel Van Oosten