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

【问题标题】：How can I link to a particular image in a lightbox slideshow?如何链接到灯箱幻灯片中的特定图像？
【发布时间】：2012-07-15 13:46:59
【问题描述】：

我想我可能有点过头了......

我将 WP 自定义帖子类型和附件与 FancyBox 结合使用来创建幻灯片/画廊。没什么特别的，我不认为。你可以在这里看到它：http://photo.convoke.info/galleries/test-gallery/

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

这可能吗？

它不一定是 #1... 可以是任何类型的标识符。我对 javascript/jQuery 的东西很陌生，所以请原谅我……我试着用谷歌搜索，但找不到任何有用的东西。

谢谢！

【问题讨论】：

对fancybox api进行了一些研究。有一个名为 jumpto 的函数听起来很有希望（根据索引号将您带到图像）......但我不知道如何实现这个......

标签： javascript jquery wordpress fancybox

【解决方案1】：

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

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

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

其中 setHash 是您添加哈希的函数。然后在页面加载/哈希更改时，您将希望处理程序根据哈希调用具有正确图像的灯箱。通常我只是让我的图像匹配的 id 并用它来传递。但是可能有一种更好的方式，比如 convoke 从花式盒子里面说的。

【讨论】：

【解决方案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] ) 方法。

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

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

【讨论】：

哇，谢谢。直到现在我才知道我是怎么错过你的回复的。每次单击图像时，我都设法使哈希值发生变化，甚至在每次哈希值更改时都设法发出警报（使用 Ben Alman 的 Hashchange 插件）...但是，我无法让 fancybox.jumpto 工作，即使是静态索引值。有什么想法吗？我一直在同一个画廊工作，所以你应该能够看到代码中的一些变化......

【解决方案3】：

Whelp，经过几周的摸索，我终于想通了。我需要几个函数：

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

这个坏小子检查哈希，并仅在页面加载时使用花哨的框打开与所述哈希相对应的图像。

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

画廊标记中每个图像的链接都会调用这个小家伙。它将页面的哈希值设置为您单击的任何图像的索引。

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

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

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

【讨论】：