Fancybox Imagemap图库

Question

我想要的是一个图像，点击后打开一个画廊。我正在使用FancyBox，我想要缩略图助手(带图像地图)

它是这样的：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)。不过，出于验证的目的，您可能需要设置一个HTML5 DOCTYPE。

更新：请参阅working DEMO here -备注(2013年1月15日)此演示将失败，因为使用的是jQuery v1.9.0。有关进一步的参考，请查看。不过，您可以使用jQuery v1.8.3重现工作演示。