CODEWITHSUNDEEP
javascriptjquerymagnific-popupzepto
Kai88
Kai88

Reputation: 69

Unique URL for each image (preferably with only a hash appended) which shows the popup image directly

I'm using the Magnific popup script.

The script is great, but what I'm missing is that the URL (www.mysite.com/?rel=gallery) is not changing, regardless of which image is shown in the popup, so nobody can link to my one image directly, just to my whole gallery.

It would be great if every image would append a unique hash (#mypic1 etc., preferably grabbed from the id of the image or its wrapper) to the URL. It should be only a hash so the site is not reloaded each time when browsing the gallery itself.

This unique URL (www.mysite.com/?rel=gallery#mypic1), if linked to from an external site, of course, should open the popup with the image#mypic1 directly.

Upvotes: 3

Views: 1530

Answers (1)

Wissam El-Kik
Wissam El-Kik

Reputation: 2525

Here's the code:

$('.image-link').magnificPopup({
    ...
    ...
    callbacks: {
        elementParse: function(item) {
            // Function will fire for each target element
            // "item.el" is a target DOM element (if present)
            // "item.src" is a source that you may modify
            window.location.hash = item.src;
        }
    }
});

window.location.hash will write "#something" in the URL and it won't reload the page. You can write whatever you want in the hash.

If you're using PHP, you would catch the hash using the following code:

<?php 
$url = "";
$parsed_url = parse_url($url);
$hash = isset($parsed_url['fragment']) ? $parsed_url['fragment'] : '';
?>

Upvotes: 3

Related Questions