jquery - "Direct link to any fancybox"，但地址栏中有 URL

Question

我看了这篇文章How to create a direct link to any fancybox box我成功地实现了它。然而，我注意到每当有人点击图像时，URL 都不会改变。所以，基本上，脚本所做的就是让我将图像的链接提供给人们。如果人们想自己捕获图像链接并分享怎么办？当人们浏览网站时，是否可以在地址栏中显示不同的图像网址？

Answer 1

如果我理解正确的话:

• 当访问者点击图像时，该图像会在 fancybox 中弹出。
• 当访问者导航到 page.html#image01 时，页面会加载并显示 fancybox 中已显示的 image01。
• 您希望当访问者点击 image02 时，网址更新为 page.html#image02。

在这种情况下，您可以在单击图像时设置 url 哈希片段。

location.hash  = "image02";

使用您提供的示例:

var thisHash = window.location.hash;
$(document).ready(function() {
    $('.thumbs').fancybox({
        prevEffect: 'fade',
        nextEffect: 'fade',
        closeBtn: true,
        arrows: true,
        nextClick: true,
        padding: 15,
        helpers: {
            thumbs: {
                width: 80,
                height: 80
            }
        },
        beforeShow: function() {
            var id = this.element.attr("id")
            if (id) {
                window.location.hash = id;
            }
        },
        beforeClose: function() {
            window.location.hash = "";
        }
    });

    if (thisHash) {
        $(thisHash).trigger('click');
    }
});