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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

@Denyerec Denyerec commented Apr 14, 2016

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

@anthonyekosky

This comment has been minimized.

Copy link

@anthonyekosky anthonyekosky commented Jan 21, 2018

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

@Leafy3311

This comment has been minimized.

Copy link

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