任何fancybox的直接链接，但地址栏中有URL

Question

我查看了这篇文章如何创建直接链接到任何fancybox box，并成功实现了它。但是，我注意到每当有人点击图像时，URL并没有发生变化。所以，基本上所有的脚本都只是让我可以把图片链接发送给别人。如果有人想要捕捉图片链接并分享它们怎么办？是否可以在人们浏览网站时在地址栏中显示不同的图像URL？

- coldpumpkin

---

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

Answer 1

如果我理解正确：

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

- Greg

---

@coldpumpkin - 另外，“image02”应该被替换为一个合适的值。 - Greg

谢谢更新，但是它没有起作用... http://josemelo.net/example/index.html - coldpumpkin

Greg，我正在使用最新的fancybox版本，确实是由fancyapps.com提供的。代码更新仍然无法正常工作。我注意到当我关闭fancybox窗口时会出现#，但当图片被打开时并没有提供任何新的URL。您可以在我的示例页面上自行检查。 - coldpumpkin

这太棒了。谢谢！ - Danny Cooper

刚想过来说一声，@Greg的答案几年后仍然适用于最新版本的fancybox。谢谢！ - dotcommer

Answer 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 = "";
    }

- guylabbe.ca

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

- Razvan Cercelaru