“直接链接到任何fancybox”，但网址在地址栏

我看了这篇文章How to create a direct link to any fancybox box，我设法实现它。不过，我注意到，只要有人点击图片，URL就不会改变。所以，基本上，所有的脚本都是让我把图像链接给人。如果人们想要抓住自己的图像链接并分享它们，该怎么办？当人们浏览网站时，是否也可以在地址栏中显示不同的图片网址？“直接链接到任何fancybox”，但网址在地址栏

来源

2012-09-07 coldpumpkin

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

好吧，对不起。 – coldpumpkin

如果我理解正确：

当访问者点击的图像，图像中的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'); 
    } 
});

来源

2012-09-07 16:48:20 Greg

嗨。这首先不起作用，因为如果我插入“。”，Dreamweaver告诉我存在错误并且确实会导致冲突，因为当我打开图像时，它会将我重定向到图像本身。其次，这是行不通的，因为代码是用于页面内的所有图像。我会尽快用一个示例页面更新此评论。 – coldpumpkin

再次。下面是示例＃1（不带location.hash）的链接：http://josemelo.net/example/index.html 下面是示例＃2（带有location.hash）的链接：http：/ /josemelo.net/example/index2.html – coldpumpkin

@coldpumpkin - 您将location.hash作为属性添加到fancybox的选项对象中。这是不正确的。我的例子'location.hash =“image02”;'是一个声明。它应该在事件处理程序中调用。 – Greg

我用格雷格的代码，但我使用这些选项来代替（以不同的方式引用的ID，因为格雷格的方法是不适合我的工作）：

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

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

来源

2013-07-04 15:34:17

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

来源

2016-09-20 16:19:50

“直接链接到任何fancybox”，但网址在地址栏

回答

相关问题