1

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!

Azuen
  • 15
  • 1
  • 7

1 Answers1

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.

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306
  • That's exactly what I needed. Thank you so much! I'll update my Fancybox right now. – Azuen Jul 03 '12 at 22:31
  • Please, If you could help me again. I've tried hard, but it didn't worked at all. Here's my original js: http://www.heypasteit.com/clip/0E43. Then I changed to: http://www.heypasteit.com/clip/0E47. My header: http://www.heypasteit.com/clip/0E48. I think that the problem is about compability – Azuen Jul 04 '12 at 14:52
  • WOW, I don't know how, But I just did it! It's working now, but there's two problems. First It don't close when I click the "X" button at the top, the only way to close is to click ouside the image, the faded part. Also I can't change images using the thumnails, only the buttons. Do you know why? This is the code I'm using: http://jsfiddle.net/ffZ7B/345/ (Yes, there are images that is not in the "coords", because it belongs to the gallery, maybe that's the reason. Cause I wanna show just the first image, to check the others you should open gallery first, theres another way to do that?) – Azuen Jul 04 '12 at 15:54
  • make sure you are loading jQuery before than any other plugin or script (I don't see jQuery in your code). Also make sure that jQuery is an updated version ... fancybox 2.x requires jQuery v1.6 or later – JFK Jul 04 '12 at 15:56
  • your jsfiddle is still using fancybox v1.3.4 – JFK Jul 04 '12 at 15:57
  • Here it is a version from a cdn server http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.0.6/jquery.fancybox.pack.js – JFK Jul 04 '12 at 15:59
  • Oh sorry I didn't noticed, I updated my jsfiddle, http://jsfiddle.net/ffZ7B/348/ Let me explain again: In my website the gallery is opening fine, just like the jsfiddle. The problem is: the "X" button is not working, and I can't change pictures from thumbnails, only from the top buttons. This is my actual code: http://www.heypasteit.com/clip/0E4A, And this is global.js: http://www.heypasteit.com/clip/0E4D – Azuen Jul 04 '12 at 16:37
  • if your jsfiddle is working fine, I don't see why it shoudln't work on your site UNLESS you have some CSS declarations that may conflict with fancybox. I cannot help you if I don't have access to your site (your code doesn't really shows anything wrong but who knows). can you share a link to your site? – JFK Jul 04 '12 at 20:21
  • Oh god! You'll not believe it. There is a plugin in conflict, seriously... It's the Contact Form 7 for Wordpress, I think the reason is because theres a fucntion in it called closeButton. – Azuen Jul 05 '12 at 12:05
  • I came back to thank, for all your time and help! It's now working fine, the problem was the plugin contact that was loading jQuery 1.7.2 twice! Thank you!!! – Azuen Jul 05 '12 at 13:02