Question

我想我可能会在这里过头......

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

除此之外，我希望能够链接到特定图像。所以，在那个特定的画廊中，有两个图像。我希望能够为某人提供http://photo.convoke.info/galleries/test-gallery#1这样的链接，并让它打开图库页面，第一张图片已在灯箱中打开。第二张图片等＃2

这可能吗？

它不一定是＃1 ......可以是任何类型的标识符。我在javascript / jQuery的东西很漂亮，所以请原谅我...我试着用谷歌搜索但找不到任何用处。

谢谢！

Answer 1

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

1）单击图像时，将window.location.hash设置为所需的值。（或使用Jquery历史插件，或使用html5历史对象，随你挑选）。这将把哈希放在URL中。

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

其中setHash是添加哈希的函数。然后在页面加载/散列更改时，您将需要一个处理程序根据散列调用具有正确图像的灯箱。通常我只是将我的图像的id匹配并使用它来传递。但是可能有一种方式，就像在fancybox内部召唤的那样说道。

Answer 2

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

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

然后使用类似于此处的代码（credit）：

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

如果存在该值，您可以轻松检查/执行某些操作。在$(document).ready()检查值，如果存在，请触发$.fancybox.jumpto( [index] )方法。

您可以根据需要展开/制作此复杂内容，例如，如果您在网页上有多个图库，则还可以在网址中包含另一个键/值以指示哪个图库。

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

Answer 3

Whelp，经过几周的捣乱，我终于想通了。我需要一些功能：

 $(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中的上一个/下一个箭头时，让哈希更改/更新。但坦率地说，如果这不起作用，我真的不在乎。

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

3 个答案: