Fancybox图像库

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

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

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

有谁知道怎么做？

谢谢！

Answer 1

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

如果要使用Thumbnail Helper ，则必须升级到Fancybox v2.x ，然后使用以下代码：

HTML：

JS：

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

注意我们使用了data-fancybox-group="gallery"属性来设置图库元素（ rel不会像使用v1.3.4一样使用area标记。）您可能需要设置HTML5 DOCTYPE虽然用于validation目的。

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