Fancybox图片图库

Question

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

就像这样：http://jsfiddle.net/ffZ7B/343/ 当您单击左边的weel时，它会打开图库，但它不会显示缩略图。

我尝试这样做：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以进行验证。

UPDATE：见working DEMO here - 注意（2013年1月15日）本演示将失败，因为使用jQuery v1.9.0是。检查THIS作进一步参考。尽管你可以用jQuery v1.8.3重现一个工作演示。