[Resolved] [Plugin: Easy FancyBox] How to get ImageMaps working with easy fancybox
I googled around for hours around this topic but didn’t find a helpful answer: The <area>-tag isn’t recognized as trigger and i don’t want to manually add and hack the non-minimized version of fancybox.
Does anyone know how to get the easy fancybox plugin in wordpress work with imapge maps?
Interesting thought. Did you ask on http://groups.google.com/group/fancybox ?
Yes, I searched and found a description here: http://groups.google.com/group/fancybox/browse_thread/thread/1dba2e72adef156/5db3b8e70021b36a?lnk=gst&q=area#5db3b8e70021b36a
But this “solution” is not really an option for wordpress and the easy fancybox plugin…
Hmmm, you are right. It seems to need editing the main fancybox library… But maybe there is another way. Do you have a link to your test page? Or maybe paste you image map code here, so I can do some testing 🙂
Yes, the URL for the testing is http://wiesenhof.at/maptest – as you can see, I created a clickable map with some areas:
<img src="http://wiesenhof.at/wp-content/uploads/karwendeltherme-480x448.jpg" alt="myMap" width="480" height="448" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area class="fancybox" shape="poly" coords="199,203,198,232,234,233,250,255,264,258,286,254,298,267,321,308,324,148,256,149,231,180,216,164,193,180" href="http://wiesenhof.at/wp-content/uploads/2010/12/paar1.jpg" alt="spa" /> <area class="fancybox" shape="poly" coords="330,135,466,131,467,200,418,239,331,236" href="http://wiesenhof.at/wp-content/uploads/2010/12/sonnenhalle3.jpg" alt="relax" /> <area class="fancybox" shape="rect" coords="164,286,294,367" href="http://wiesenhof.at/wp-content/uploads/2010/12/hallenbad.jpg" alt="Hallenbad" /> <area class="fancybox" shape="poly" coords="368,392,468,408,467,318,421,279,421,252,374,249,337,294" href="http://wiesenhof.at/wp-content/uploads/2010/12/bad2.jpg" alt="Bath" /> </map>
I added the class “fancybox to each are tag, but this is useless. i had a solution before with thickbox, that worked in that way. i think the solution could be adding a custom fancybox “listener” with jQuery on that page…
Did some testing and if you add the following code just before the </head> tag in your themes header.php, it should work:
The idea is great so I’ll put it up for the next release (after which you should be able to remove your custom code) or you could wait few days and upgrade to the new development release 🙂
i added the code, but fancybox doesn’t load on area… but i will wait for the next release.
glad to read that you find this feature useful 😉
Ok, I just uploaded a new dev version so it should be updated and available on http://downloads.wordpress.org/plugin/easy-fancybox.zip within the hour. Remove that code again and overwrite the old plugin files with the new ones.
A preview is available on http://demo.4visions.nl/easy-fancybox-sandbox/ where I used your image map under point 6 of “Features in dev release”. I tested in Opera, Chrome and FireFox but not IE. Please let me know if you find any problems 🙂
i have installed easy fancybox and it is working really nicely but for some reason (i blame the tool, of course!) mainly me, i can’t make it work with an imagemap. could you please give me some advice or some link that may help me?
i have easy fancybox v. 22.214.171.124, there is no other ‘lightbox’ type plugin. is there any other requirement for your plugin?
i followed the example in the demo link you mentioned above, but i can’t make it work.
any suggestions much appreciated.
You’re in luck, image map support is in the current development release.
Try it 🙂
excellent!!! it’s working beautifully. i tried it in ie9, opera, firefox, chrome – all great. with safari, with a imagemap of 3 links, the first one dosn’t work…?
with safari, with a imagemap of 3 links, the first one dosn’t work…?
That’s an interesting observation.
I’ve set up an image map with three area’s on http://demo.4visions.nl/easy-fancybox-sandbox/ (scroll down to point 6 under “Features…”) but sadly, I do not have Safari to see if I can reproduce this. Could you take a look and see if it happens there too? Does Safari have an error console of some sort? And if so, does it report anything relevant?
sorry for the delay. i couldn’t reproduce it either i must have messed something up before; your plug-in works great in safari too!
any idea if is it possible to keep the imagemap’s coordinates proportional in a fluid theme?
- The topic ‘[Resolved] [Plugin: Easy FancyBox] How to get ImageMaps working with easy fancybox’ is closed to new replies.