Fancybox图像库 [英] Fancybox Imagemap Gallery

问题描述

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

What I want is an image which after been clicked opens a gallery. I'm using FancyBox, and I want Thumbnail Helper(with image map)

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

It's like this: http://jsfiddle.net/ffZ7B/343/ When you click the left weel, It opens the gallery, but it dosn't show the thumbnails.

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

有谁知道怎么做？

谢谢！

推荐答案

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

The Thumbnail Helper is a totally NEW feature of fancybox v2.x and non-existing in previous versions. You are using fancybox v1.3.4 in your jsfiddle.

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

If you want to use the Thumbnail Helper, you have to upgrade to Fancybox v2.x, then use this code:

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 。

NOTICE that we used the data-fancybox-group="gallery" attribute in order to set the gallery elements (rel won't work with the area tag as it used to work with v1.3.4.) You may need to set a HTML5 DOCTYPE though for validation purposes.

更新：参见在这里工作DEMO - 注意（2013年1月15日）此演示将失败，因为使用的是jQuery v1.9.0。请查看 此 以获取进一步的参考。您可以使用jQuery v1.8.3重现一个可用的演示。

UPDATE : See working DEMO here - NOTE (Jan 15, 2013) this demo will fail because is using jQuery v1.9.0. Check THIS for further reference. You could reproduce a working demo with jQuery v1.8.3 though.

这篇关于Fancybox图像库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！