javascript - Fancybox Imagemap Gallery

Question

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!

Answer 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.