我看了这篇文章How to create a direct link to any fancybox box,我设法实现它。不过,我注意到,只要有人点击图片,URL就不会改变。所以,基本上,所有的脚本都是让我把图像链接给人。如果人们想要抓住自己的图像链接并分享它们,该怎么办?当人们浏览网站时,是否也可以在地址栏中显示不同的图片网址?“直接链接到任何fancybox”,但网址在地址栏
回答
如果我理解正确:
- 当访问者点击的图像,图像中的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');
}
});
嗨。这首先不起作用,因为如果我插入“。”,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 = "";
}
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); },
- 1. Fancybox:链接改变地址栏中的网址,并链接到一个打开的Fancybox页面
- 2. Android链接网址链接非网址
- 3. htaccess重定向url无需在地址栏中链接网址
- 4. 在地址栏中直接插入链接的Geb测试
- 5. 在地址栏中隐藏url链接
- 6. 链接到JavaScript的网址?
- 7. 如何获取网页链接地址
- 8. 地址栏输入与链接
- 9. 地址:类链接
- 10. 相对直接网址
- 11. 直接通过网址
- 12. 如何在地图上点击链接地址获取地址?
- 13. 实现直接地址表
- 14. 如何获得Facebook的iFrame网址的直接链接?
- 15. 插入网址到地址栏
- 16. 我如何直接在网址
- 17. 深层链接中的本地网址
- 18. 如何通过本地链接地址获得远程全局链接地址?
- 19. 链接到谷歌地图地址API
- 20. 代码和地址栏中的链接网址与预期不同
- 21. 如何超链接的网址或非网址在php
- 22. Android:深度链接网址
- 23. 复制链接地址
- 24. 链接地址不能跨
- 25. mailto:链接等效地址
- 26. 如何在“邮寄地址”体链接
- 27. 访问直接内存地址,我们可以直接访问任何内存地址?
- 28. 如何打开新窗口的链接显示在地址栏
- 29. 在Asp.net中加密地址栏网址
- 30. 在地址栏中缩短网址
欢迎来到StackOverflow!请限制自己每个帖子一个问题/主题。按“提问”即可开始新建一个。这将使人们更容易审查和回答您的问题。谢谢! – Greg
好吧,对不起。 – coldpumpkin