Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Deep Linking with Magnificent popup
<script type="text/javascript">
function loadGalleryDeepLink()
{
var prefix = "#gallery-";
var h = location.hash;
if (document.g_magnific_hash_loaded === undefined && h.indexOf(prefix) === 0)
{
h = h.substr(prefix.length);
var $img = $('*[data-image_id="' + h + '"]');
if ($img.length)
{
document.g_magnific_hash_loaded = true;
$img.parents().find('.popup-gallery').magnificPopup("open", $img.index());
}
}
}
$(document).ready(function ()
{
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
callbacks: {
close: function ()
{
location.hash = "";
},
change: function ()
{
console.log('Content changed');
location.hash = "gallery-" + this.currItem.el.data("image_id");
}
}
});
loadGalleryDeepLink();
});
</script>
Simply add the "data-image_id" that identify each images
<div class="popup-gallery row">
<a href="/a.jpg" data-image_id="1-1" ><img src="/a-thumb.jpg"></a>
<a href="/b.jpg" data-image_id="1-2" ><img src="/b-thumb.jpg"></a>
<a href="/c.jpg" data-image_id="1-3" ><img src="/c-thumb.jpg"></a>
<a href="/d.jpg" data-image_id="1-4" ><img src="/d-thumb.jpg"></a>
</div>
Hey, it also work with multiple galleries !
<div class="popup-gallery row">
<a href="/a.jpg" data-image_id="2-1" ><img src="/a-thumb.jpg"></a>
<a href="/b.jpg" data-image_id="2-2" ><img src="/b-thumb.jpg"></a>
<a href="/c.jpg" data-image_id="2-3" ><img src="/c-thumb.jpg"></a>
<a href="/d.jpg" data-image_id="2-4" ><img src="/d-thumb.jpg"></a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment