Rockstar Web Developer

Responsive, Fast Image lightbox with gallery support – Magnific Popup

Published on August 28, 2013 by , in Javascript

The responsive trend has gotten up and beyond being highly popular nowadays. Therefore old tools need to be replaced by the ones which are up to the latest trends.

In time I’ve gone through the following libraries:

Neither of them support responsiveness, so the toolbox need to get updated. Lately I’ve stumbled upon an article on Smashing Magazine which pointed to the new kid in town: Magnific Popup

It didn’t only impress me only with the support of responsiveness, but in fact, with it’s nifty preload capabilities built inside it – you can set it up to preload the next / previous images in the gallery as the user is viewing it. With the modern browser’s capability to load up 6 resources in parallel, it would be sad not to make use of such a feature.

If you’re like me and want to get running really fast, this is a quick recipe to get you going without much fuss:

1. Download the CSS file from here and link to it from your page’s head section:

https://raw.github.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css

<link rel='stylesheet' href='/path/to/magnific-popup.css' type='text/css' media='all' />

2. The Javascript

Load Zepto.js (in case you don’t have / need jQuery already).
Zepto is a lightweight framework which handles most of the things jQuery already does, in case you are not in need of the full-fledged jQuery framework. It’s 3 times smaller when gzipped (10K vs. ~30K for the latest 1.10 jQuery).

<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js" type="text/javascript"></script>

OR

<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>

And then build the Magnific Popup JS using their provided build tool. For the most basic image + gallery support, you only need: image, gallery. (I also add in High-DPI support, Image zoom animation, fast tap for gallery arrows). Copy paste the content in a magnific_popup.min.js file, which you will link to after the zepto/jquery library call.

<script src="path/to/magnific_popup.min.js" type="text/javascript"></script>

And now you only need to trigger the script. Create a new magnific_popup.comp.js file with the following content (download from here):

jQuery(document).ready(function($) {
$.expr[':'].linkingToImage = function(elem, index, match){
return $(elem).is('a') && elem.href && (/\.(gif|jpe?g|png|bmp)$/).test(elem.href);
};

var $imageLinks = $('a:linkingToImage').filter(function() {
return $(this).closest('.pictures').length == 0
}),
$galleries = $('.pictures');

if (typeof $.fn.magnificPopup != 'undefined') {
$galleries.magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,2] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
$imageLinks.magnificPopup({
type: 'image'
});
}
}

A couple of explanation on what it does.

  • it checks for the existance of the magnificPopup script (such that the script doesn’t break the entire JS functionality of your site if you remove the plug-in at some point in time)
  • it creates a new selector which helps in attaching the magnificPopup functionality to all links pointing to images (according to the extension of the files).
  • it starts the gallery mode of magnificPopup on links which are child of a tag with a class of ‘pictures’, adding the previous / next navigation links.
  • the pre-load is activated to pre-load the next 2 images of the currently being viewed one. I find this number to yield the best performance.

Of course you also need to embed this file as well:

<script src="path/to/magnific_popup.comp.js" type="text/javascript"></script>

Enjoy using it!

FavoriteLoadingAdd to favorites

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent writings