“直接链接到任何花式框”，但在地址栏中带有 URL答案

【问题标题】："Direct link to any fancybox", but with URL in address bar“直接链接到任何花式框”，但在地址栏中带有 URL
【发布时间】：2012-09-01 11:40:21
【问题描述】：

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

【问题讨论】：

欢迎来到 StackOverflow！请限制自己在每个帖子中回答一个问题/主题。按“”开始一个新的。这将使人们更容易查看和回答您的问题。谢谢！

标签： jquery url hyperlink fancybox address-bar

【解决方案1】：

如果我理解正确：

当访问者点击图片时，图片会在花式框中弹出。
当访问者导航到 page.html#image01 时，页面加载时 image01 已经显示在 fancybox 中。
当访问者点击 image02 时，您希望 url 更新为 page.html#image02。

这样的话，你可以设置点击图片时的url hash片段。

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');
    }
});

【讨论】：

嗨。这首先不起作用，因为如果我插入“.”，dreamweaver 会告诉我有一个错误并且确实会导致冲突，因为当我打开图像时，它会将我重定向到图像本身。其次，这是行不通的，因为代码适用于页面内的所有图像。我很快会用示例页面更新此评论。
你好。这是示例 #1（没有 location.hash）的链接：josemelo.net/example/index.html 这是示例 #2（带有 location.hash）的链接：josemelo.net/example/index2.html
@coldpumpkin - 您将 location.hash 作为属性添加到 fancybox 的选项对象中。这是不正确的。我的例子location.hash = "image02"; 是一个声明。它应该在事件处理程序中调用。
@coldpumpkin - 此外，“image02”应该替换为适当的值。
你能给我举个例子吗？

【解决方案2】：

我使用了 Greg 的代码，但我使用了这些选项（并以不同的方式引用 id，因为 Greg 的方式对我不起作用）：

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

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

【讨论】：

【解决方案3】：

之前显示：函数（）{
    var id = $(this.element).attr("href");

    如果（身份证）{
        window.location.hash = id;
    }
},
关闭后：函数（）{
    history.pushState("", document.title, window.location.pathname + window.location.search);
},

【讨论】：