Magnific Popup | Responsive Web Design

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

Check out this Pen!

  • Resource Name

    Magnific Popup

  • Resource Creator

    Dmitry Semenov

Description

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

View on Github Download Resource

Sites that use Magnific Popup

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.