Magnific Popup
These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, Dmitry Semenov created Magnific Popup, an open-source lightbox plugin focused on performance.
This isn’t the first time that Dmitry has produced something of great quality around images and responsive design, he also is the brains behind the premium paid RoyalSlider Plugin.
Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).
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 weights about 0.5KB (gzipped). Sass CSS preprocessor is used for easier skinning, but you’re not obligated to use it.
CSS Sizing
One of the great features of this plugin is unlike other popup/lightbox plugins it lets you use relative units like EM’s to resize lightbox with help of CSS media queries rather than setting the values in the javascript.
Image Loading
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 within the plugin itself are made with pure CSS so it scales well for any pixel density. When it comes to the image you want to lightbox there is an inbuilt way to update the image reference for the high DPI version (as long as you maintain a consistent naming convention).
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, which is expecially useful when your popups same pattern
CodePen Example
