Skip to content

Instantly share code, notes, and snippets.

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 ()
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-" +"image_id");
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>
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>
Copy link

Denyerec commented Apr 14, 2016

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

Copy link

anthonyekosky commented Jan 21, 2018

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

Copy link

Leafy3311 commented Sep 30, 2019

This was really helpful thanks!

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