在地址栏中输入“直接链接到任何的fancybox”，但网址(“Direct link to any

我接过来一看这个帖子如何创建一个直接链接到任何的fancybox箱，我设法实现它。然而，我注意到，只要有人点击图像时，URL不会改变。所以，基本上，所有的剧本确实是让我给图像的人的联系。如果人们想赶上自己的图像链接和分享吗？是否有可能也显示在地址栏中的不同图像的URL，因为人们浏览网站？

Answer 1:

如果我理解正确：

当访问者点击的图像，图像中的fancybox弹出。
当访问者浏览到page.html中＃image01，页面加载与image01已经在所示的fancybox。
你想要的网址更新到page.html中＃image02当访问者点击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');
    }
});

Answer 2:

我用格雷格的代码，但我使用这些选项来代替（以不同的方式引用的ID，因为格雷格的方法是不适合我的工作）：

    onStart: function(selectedArray, selectedIndex, selectedOpts) { 
        var id = $(selectedArray[ selectedIndex ]).attr('id');

        if (id) {
            window.location.hash = id;
        }
    },
    onClosed: function() {
        window.location.hash = "";
    }

Answer 3:

beforeShow: function() {
    var id = $(this.element).attr("href");

    if (id) {
        window.location.hash = id;
    }
},
afterClose: function() {
    history.pushState("", document.title, window.location.pathname + window.location.search);
},

文章来源: “Direct link to any fancybox”, but with URL in address bar