javascript - Fancybox 图片图库

Question

我想要的是一张图片，点击后会打开一个画廊。我正在使用 FancyBox，我想要 Thumbnail Helper（带图像映射）

就像这样： http: //jsfiddle.net/ffZ7B/343/ 当你点击左边的轮子时，它会打开画廊，但它不会显示缩略图。

我试过这个：http: //jsfiddle.net/ffZ7B/344/

有谁知道该怎么做？

谢谢！

Answer 1

这Thumbnail Helper是fancybox v2.x 的全新功能，在以前的版本中不存在。您在 jsfiddle 中使用了 fancybox v1.3.4。

如果你想使用Thumbnail Helper，你必须升级到Fancybox v2.x，然后使用这个代码：

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>

JS：

$(document).ready(function() {
 $("area.fancybox").fancybox({
  helpers: {
   thumbs   : {
    width   : 50,
    height  : 50
   }
  }
 }); // fancybox
}); // ready

请注意，我们使用该data-fancybox-group="gallery"属性来设置画廊元素（rel不能与area标签一起使用，因为它曾经与 v1.3.4 一起使用。）您可能需要设置 HTML5DOCTYPE以进行验证。

更新：在此处查看工作演示-注意（2013 年 1 月 15 日）此演示将失败，因为使用的是 jQuery v1.9.0。检查此以供进一步参考。不过，您可以使用 jQuery v1.8.3 重现工作演示。