"直接链接到任何fancybox",但地址栏中有URL

Question

我看了一下这篇文章如何创建一个直接链接到任何fancybox框,我设法实现它.但是,我注意到只要有人点击图片,网址就不会改变.因此,基本上,所有脚本都是允许我将图像的链接提供给人.如果人们想要自己捕捉图像链接并分享它们会怎么样？当人们浏览网站时,是否可以在地址栏中显示不同的图片网址？

Answer 1

如果我理解正确:

• 当访问者点击图像时,图像会弹出fancybox.
• 当访问者导航到page.html#image01时,页面加载的图像已经显示在fancybox中.
• 当访问者点击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');
    }
});