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

时间:2012-09-07 15:00:39

标签: jquery url hyperlink fancybox address-bar

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

3 个答案:

答案 0 :(得分:8)

如果我理解正确:

  • 当访问者点击图片时,图片会弹出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');
    }
});

答案 1 :(得分:0)

我使用了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 = "";
    }

答案 2 :(得分:0)

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