“直接链接到任何fancybox”，但地址栏中有URL [英] "Direct link to any fancybox", but with URL in address bar

问题描述

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

I took a look at this post How to create a direct link to any fancybox box and I managed to implement it. However, I noticed that whenever someone clicks an image, the URL doesn't change. So, basically, all the script does is to allow me to give the link of the image to people. What if people want to catch the image links for themselves and share them? Is it possible to also show the different image urls in the address bar as people navigate the site?

推荐答案

如果我理解正确：

• 当访问者点击图片时，图片会弹出fancybox。


• 当a访问者导航到page.html＃image01，页面加载了image01已经显示在fancybox中。


• 当访问者点击image02时，您希望网址更新为page.html＃image02。

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

In that case, you can set the url hash fragment when the image is clicked.

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

这篇关于“直接链接到任何fancybox”，但地址栏中有URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！