Skip to content

Instantly share code, notes, and snippets.

@sadortun
Created October 28, 2015 04:19
Show Gist options
  • Save sadortun/69a9fa854bf0ca3a4891 to your computer and use it in GitHub Desktop.
Save sadortun/69a9fa854bf0ca3a4891 to your computer and use it in GitHub Desktop.
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>
@Denyerec
Copy link

Wondered if you were still using magnific, or if you'd found something more mobile-friendly ?

@anthonyekosky
Copy link

Thank you for the code here, It has helped me out.
Thanks. ;)

@Leafy3311
Copy link

This was really helpful thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment