每个图像的唯一URL(最好只添加哈希),直接显示弹出图像

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

本文关键字:图像 哈希 显示 添加 唯一 URL      更新时间:2023-09-26

我使用Magnific弹出脚本。

脚本是伟大的,但我错过的是网址(www.mysite.com/?rel=gallery)没有改变,无论哪个图像显示在弹出窗口,所以没有人可以直接链接到我的一个图像,只是到我的整个画廊。

如果每个图像都能在URL上附加一个唯一的哈希值(#mypic1等,最好是从图像的id或其包装器中抓取),那就太好了。它应该只是一个散列,这样网站就不会在每次浏览画廊时重新加载。

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

代码如下:

$('.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'] : '';
?>