WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] How to get ImageMaps working with easy fancybox (14 posts)

  1. achensee
    Member
    Posted 3 years ago #

    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?

  2. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Interesting thought. Did you ask on http://groups.google.com/group/fancybox ?

  3. achensee
    Member
    Posted 3 years ago #

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

  4. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    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 :)

  5. achensee
    Member
    Posted 3 years ago #

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

  6. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Did some testing and if you add the following code just before the </head> tag in your themes header.php, it should work:

    <script type="text/javascript">
    $('area.fancybox').fancybox( $.extend({}, fb_opts, { }) );
    </script>

    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 :)

  7. achensee
    Member
    Posted 3 years ago #

    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 ;-)

  8. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    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 :)

  9. buildingsights
    Member
    Posted 3 years ago #

    hi there!

    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. 1.3.4.8, 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.
    thank you.

  10. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    You're in luck, image map support is in the current development release.

    Try it :)

  11. buildingsights
    Member
    Posted 3 years ago #

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

    thank you!

  12. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    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?

    Thanks :)

  13. buildingsights
    Member
    Posted 3 years ago #

    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!

    thanks again.

    any idea if is it possible to keep the imagemap's coordinates proportional in a fluid theme?

  14. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    any idea if is it possible to keep the imagemap's coordinates proportional in a fluid theme?

    I have no idea... But searching for "fluid image map coordinates" on Google does not seem to give any promising (positive) answers on the subject...

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic