如何链接到灯箱幻灯片中的特定图像？

我使用WP自定义帖子类型和附件与FancyBox一起创建幻灯片/图库。没什么奇特的，我不认为。你可以在这里看到：http://photo.convoke.info/galleries/test-gallery/

除了，我想能够链接到一个特定的图像。所以，在那个特别的画廊里，有两个图像。我希望能够给某人一个像http://photo.convoke.info/galleries/test-gallery#1这样的链接，让它打开画廊页面，第一张图片已经在Lightbox中打开。＃2为第二个图像等。

这可能吗？

它不必是＃1 ...可以是任何类型的标识符。我很喜欢JavaScript/jQuery的东西，所以请原谅我...我试着用google搜索，但找不到任何有用的东西。

谢谢！

来源

2012-03-22 convoke

做一点挖掘到fancybox api。有一种称为jumpto的功能，它听起来很有前途（将您引导至基于其索引号的图像）......但我不知道如何去实现这个... – convoke 2012-03-22 18:32:13

小女孩，经过几个星期的磨合，我终于明白了这一切。我需要的一些功能：

$(document).ready(function() { 
       if (window.location.hash) { // if there is a hash 
         $.fancybox.open($('.fancybox'), {index : parseInt(location.hash.substring(1))}); 
       } 
     });

这BADBOY检查哈希，并打开使用，只有当页面加载看中框对应于所述哈希的形象。

function sethash(id) 
{ 
    top.document.location.hash = id; 
}

这个小家伙被链接到图库标记中的每个图像调用。它将页面的哈希设置为与您点击的任何图像的索引相等。

<a onclick="sethash('$count')>Image</a>

这不是真正的代码，但你明白了。我有一个名为count的变量，用于为图库中的每个图像编制索引。这个数字对应于fancybox幻灯片中图像的索引（即，对于图库中的第一个图像它从0开始）

这是很多工作，但它终于工作（几乎）完美。我要尝试的最后一件事是当你点击fancybox中的上一个/下一个箭头时，让哈希值更改/更新。但坦率地说，如果这不起作用，我真的不在乎。

来源

2012-03-29 16:04:41 convoke

你需要用纯js或jquery做两件事情。

1）当你点击图片时，将window.location.hash设置为你想要的值。（或使用JQuery的历史插件，或使用HTML5的历史对象，请选择）。这将把哈希放在URL中。

<img onclick='setHash(this.id)' ...

其中setHash是您添加散列的函数。然后在页面加载/哈希变化，你会想要一个处理程序来调用基于散列的正确图像的灯箱。通常我只是让我的图像的id匹配并使用它来传递。但是可能有一种好的方式，就像在花哨箱里说的那样。

来源

2012-03-22 18:50:17 FlavorScape

您可以使用查询字符串分发网址以轻松完成此操作。

http://photo.convoke.info/galleries/test-gallery?fancybox=1

然后使用类似的发现这里（credit）代码：

，你可以很容易地检查/如果该值存在做一些事情。在您的$(document).ready()检查该值，如果存在，请触发$.fancybox.jumpto([index])方法。

您可以根据需要扩展/使其变得复杂，例如，如果网页上有多个图库，则还可以在URL中包含另一个键/值以指示哪个图库。

http://photo.convoke.info/galleries/test-gallery?fbgallery=fanexpo&fbphoto=1

来源

2012-03-23 14:33:39

哇，谢谢你。我不知道我到现在为止错过了你的回应。我设法让每次点击图片时都会改变哈希值，甚至在哈希每次改变时都设法调用一个提醒（使用Ben Alman的Hashchange插件）... 但是，我无法获得fancybox .jumpto工作，即使是静态索引值。有什么想法吗？我一直在研究相同的画廊，所以你应该能够看到代码中的一些变化...... – convoke 2012-03-29 14:53:32

如何链接到灯箱幻灯片中的特定图像？

回答

相关问题