首页 > 编程语言> 文章详细

javascript – Fancybox Imagemap图库

2019-09-28 04:36:54 阅读：262 来源： 互联网

标签：javascript jquery gallery fancybox imagemap

我想要的是一张图片,点击后打开一个图库.我正在使用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重现一个工作演示.

标签：javascript,jquery,gallery,fancybox,imagemap
来源： https://codeday.me/bug/20190928/1825942.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Fancybox Imagemap图库