Just did this, didn't find anything on the internet linking these two great bits of software, so thought I'd post my solution quickly. Magnific is a really, really solid, well designed Javascript lightbox/gallery tool. It stresses the boring basic engineering side of Javascript plugins - cross-platform portability, resilience, versatility and performance. I have tested many, and this one ticks boxes such as intelligent degrading, speed, CSS over JS, centring, iframes, mobiles and touch screens, keyboard, right-click and simplicity, if sometimes being a bit less snazzy than others. Whole detailed articles have been written on how magnific degrades, for example.
Chunk GalleryThumbTpl provides the data for magnific in the a tag:
<div class="[[+cls]]" style="float:left; width: 200px; padding: 27px;">
<h2 style="padding:20px 0;text-transform:capitalize;">[[+name]]</strong></h2>
<a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image_absolute]]`:else=`[[~[[*id]]?
&[[+imageGetParam]]=`[[+id]]`
&[[+albumRequestVar]]=`[[+album]]`
&[[+tagRequestVar]]=`[[+tag]]` ]]`]]" alt="[[+description]]" title="[[+name]]">
<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]] - click to zoom" title="[[+name]] - click to zoom" />
</a>
<p>[[+description]]</p>
</div>
The gallery template handles the CSS and JS:
<link rel="stylesheet" href="css/magnific-popup.css" />
<script src="js/magnific.min.js"></script>
You can build versions of magnific.js with just the features you use, but I found the full build with everything worked better in fringe cases, for example dynamic cropping in Chrome, even though I use the bare minimum of features - no zoom, Retina, etc.
Later in the template comes the Gallery call:
<div class="popup-gallery">
[[!Gallery? &album=`[[*pagetitle]]` &thumbTpl=`GalleryThumbTpl` &linkToImage=`1` &thumbWidth=`200` &thumbHeight=`200` ]]
</div>
Then at the bottom, (but before Google Analytics), the magnific call:
<script>
jQuery(document).ready(function($) {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
disableOn: 400,
closeOnContentClick: true, // ONLY for images
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [1,2] // Will preload 1 before and 2 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return '<strong>' + item.el.attr('title') + '</strong><br/>' + item.el.attr('alt');
}
}
});
});
</script>
Kept it all super-basic for maximum resilience.
