javascript - 每个图像的唯一 URL(最好只附加一个散列)直接显示弹出图像

Question

我正在使用 Magnific 弹出脚本。

脚本很棒，但我缺少的是 URL (www.mysite.com/?rel=gallery) 没有改变，无论弹出窗口中显示哪个图像，所以没有人可以链接到我的一张图片直接上传到我的整个画廊。

如果每个图像都将一个唯一的散列(#mypic1 等，最好从图像的 ID 或其包装器中获取)附加到 URL，那就太好了。它应该只是一个散列，这样网站就不会在每次浏览画廊本身时都重新加载。

如果从外部站点链接到这个唯一的 URL (www.mysite.com/?rel=gallery#mypic1)，当然应该直接打开带有图像#mypic1 的弹出窗口。

Answer 1

代码如下:

$('.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 将在 URL 中写入“#something”并且不会重新加载页面。 您可以在 hash 中写入任何内容。

如果您使用的是 PHP，则可以使用以下代码捕获哈希:

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