Fancybox Imagemap Gallery

问题

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)

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.

I tried this: http://jsfiddle.net/ffZ7B/344/

Does anyone knows how to do this?

Thank you!

回答1:

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.

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

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.

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.

来源：https://stackoverflow.com/questions/11299553/fancybox-imagemap-gallery

标签

javascript

jquery

fancybox

gallery

imagemap