我想要的是一张图片,点击后打开一个图库.我正在使用FancyBox,我想要Thumbnail Helper(带图像映射)

它是这样的：http://jsfiddle.net/ffZ7B/343/
当您单击左侧weel时,它会打开图库,但它不会显示缩略图.

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

有谁知道怎么做？

谢谢！

解决方法:

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不会像使用v1.3.4一样使用区域标记.)您可能需要设置HTML5 DOCTYPE虽然用于验证目的.

更新：请参阅working DEMO here – 注意(2013年1月15日)此演示将失败,因为使用的是jQuery v1.9.0.检查THIS以获得进一步的参考.您可以使用jQuery v1.8.3重现一个工作演示.