Magnific Popup, advertised as “Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js)”, is a open-source lightweight lightbox plugin that boasts progressive image loading, CSS based resizing, preloading of adjacent images in galleries, high-dpi support, and a slew of other features.
Released only a short while ago, but already receiving praise on sites such as Smashing Magazine, Magnific Popup really is all it is cracked up to be.
One downside, at least for the time being, is that the only option for WordPress users is to install it yourself rather than using a plugin, with the latter being the easiest method. The way in which Magnific Popup loads images makes WordPress implementation more difficult than adding a couple of scripts to your site.
Being impatient and wanting absolute control of what is added to my sites header/footer, I decided to go ahead and implement Magnific Popup myself. It is rather simple and here is how it is done.
Download & Install Magnific Popup
This may vary depending on your theme configuration, but you should use something like this to insert the CSS file into your header:
And this to insert the JS into your footer:
Get it Initialized
Initializing Magnific Popup is really simple, but for WordPress you will need to initialize it for inline images as well as galleries.
You can place this in a file and call it below the jquery.magnific-popup.js using
Editing Your Functions
Now you have working galleries, but your single images still won’t open right? This is due to wordpress not inserting any class to a tags (containing images) by default. Magnific Popup needs a class in order to initialize these elements, so you must add one by editing the functions.php file.
This simple snippet, when added to your functions.php file will add class of “pop” to all images that are linked to a larger version.
If you have any other lightbox plugins installed it would be a good idea to disable them as they are no longer needed.
Instead of calling the scripts directly like I have done in the example, you can enqueue them in your functions as suggested byJohn in the comments.
Method #2 via Heracles Papatheodorou
If you choose this method you can enqueue this script instead of what is posted above. You can also ignore editing your functions to add a class to single images.
There You Have It
Magnific popup now works in WordPress, and you don’t even have to wait for an official plugin. You can see both inline images and galleries working on this page.