Javascript Fancybox影像地图库

我想要的是一个图像，点击后打开一个画廊。我使用的是FancyBox，我需要缩略图助手（带有图像贴图）

是这样的: 当你点击左图时，它会打开图库，但不会显示缩略图

我试过这个：

有人知道怎么做吗

---

谢谢大家!

缩略图帮助器是fancybox v2.x的一个全新功能，在以前的版本中不存在。您正在JSFIDLE中使用fancybox v1.3.4

如果要使用

缩略图帮助程序

，必须升级到，然后使用以下代码：

HTML:

<img src="images/imageMap.jpg" usemap="#map" />

<map name="map" id="map">
 <area class="fancybox" href="images/01.jpg" data-fancybox-group="gallery" shape="rect" coords="46,38,201,154" title="01"  />
 <area class="fancybox" href="images/02.jpg" data-fancybox-group="gallery" shape="rect" coords="295,35,388,83" title="02"  />
 <area class="fancybox" href="images/03.jpg" data-fancybox-group="gallery" shape="rect" coords="27,166,134,293" title="03" />
</map>

请注意我们使用了

data fancybox group=“gallery”

属性来设置库元素（

rel

不会像使用v1.3.4那样使用

区域

标记）。出于验证目的，您可能需要设置HTML5

DOCTYPE

---

更新：请参阅-注意（2013年1月15日）此演示将失败，因为它使用的是jQuery v1.9.0。检查以获取进一步参考。不过，您可以使用jQuery v1.8.3复制一个可用的演示。

缩略图帮助程序是fancybox v2.x的一个全新功能，在以前的版本中不存在。您正在JSFIDLE中使用fancybox v1.3.4

如果要使用

缩略图帮助程序

，必须升级到，然后使用以下代码：

HTML:

<img src="images/imageMap.jpg" usemap="#map" />

<map name="map" id="map">
 <area class="fancybox" href="images/01.jpg" data-fancybox-group="gallery" shape="rect" coords="46,38,201,154" title="01"  />
 <area class="fancybox" href="images/02.jpg" data-fancybox-group="gallery" shape="rect" coords="295,35,388,83" title="02"  />
 <area class="fancybox" href="images/03.jpg" data-fancybox-group="gallery" shape="rect" coords="27,166,134,293" title="03" />
</map>

请注意我们使用了

data fancybox group=“gallery”

属性来设置库元素（

rel

不会像使用v1.3.4那样使用

区域

标记）。出于验证目的，您可能需要设置HTML5

DOCTYPE

---

更新：请参阅-注意（2013年1月15日）此演示将失败，因为它使用的是jQuery v1.9.0。检查以获取进一步参考。不过，您可以使用jQuery v1.8.3复制一个可用的演示。

我试过这个，您是否检查了第二个链接？如果你觉得这个答案有用的话。我试过这个，你检查了第二个链接了吗？如果你觉得这个答案有用，那正是我需要的。非常感谢你！我现在就更新我的Fancybox。如果你能再次帮助我，请。我已经尽力了，但根本没用。这是我的原始js:。然后我改成：。我的标题：。我认为问题在于兼容性哇，我不知道怎么做，但我只是做到了！它现在正在工作，但有两个问题。首先，当我单击顶部的“X”按钮时，它不会关闭，关闭的唯一方法是单击图像外的褪色部分。此外，我不能使用图钉更改图像，只能使用按钮。你知道为什么吗？这就是我正在使用的代码：（是的，有一些图像不在“coords”中，因为它属于库，也许这就是原因。因为我只想显示第一个图像，要检查其他图像，你应该先打开库，还有其他方法吗？）确保你在加载jQuery之前没有加载任何其他插件或脚本（我在代码中没有看到jQuery）。还要确保jQuery是更新版本…fancybox 2.x需要jQuery v1.6或更高版本。您的JSFIDLE仍在使用fancybox v1.3.4这正是我所需要的。非常感谢！我现在就更新我的fancybox。请，如果您能再次帮助我的话。我已经尽力了，但根本没用。这是我原来的js:。然后我改为：.我的标题：。我认为问题在于兼容性哇，我不知道怎么做，但我刚刚做到了！它现在可以工作了，但有两个问题。首先，当我单击“X”时，它没有关闭按钮在顶部，关闭的唯一方法是单击“取消图像”，即褪色部分。此外，我不能使用图钉更改图像，只能使用按钮。你知道为什么吗？这是我使用的代码：（是的，有图像不在“坐标”中），因为它属于gallery，也许这就是原因。因为我只想显示第一张图像，要检查其他图像，你应该先打开gallery，还有其他方法吗？）确保你在加载jQuery之前加载了其他插件或脚本（我在你的代码中没有看到jQuery）。还要确保jQuery是更新版本…fancybox 2.x需要jQuery v1.6或更高版本。您的JSFIDLE仍在使用fancybox v1.3.4