Deep Linking with Magnificent popup

magnific-popup-deep-linking.js

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

page.html

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>

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);

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

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

This was really helpful thanks!