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>
@nikmauro
Copy link

nikmauro commented Mar 3, 2016

i made some modification here my code

(function ($) {


    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.get(0).click();
            }
        }
    }


    $("a[rel='lightbox']").magnificPopup({
        type: 'image',
        gallery: {enabled: true},
        callbacks: {
            open: function () {
                console.log('MP open');
            },
            close: function () {
                console.log('MP close');
                parent.location.hash = '';
            },
            change: function () {
                console.log('MP change');
                location.hash = "gallery-" + this.currItem.el.data("image_id");
            }
        }
    });

    loadGalleryDeepLink();

})(jQuery);

@Denyerec
Copy link

Denyerec commented Apr 14, 2016

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

@anthonyekosky
Copy link

anthonyekosky commented Jan 21, 2018

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

@Leafy3311
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