Facebox and image map problem

[sub]

1) Script Title: Facebox image and content viewer (v 1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

3) Describe problem: I am trying to invoke Facebox from a link on an area map, and it appears that rel="facebox" is being ignored in that situation.

Here is the code i am using:


<div class="panel">
<img src="wp-content/themes/default/images/bragi.png" width="210" height="118" alt="DrBragi" usemap="#Map4" />
<map name="Map4">
<area shape="circle" coords="185,106,9" href="wp-content/themes/default/sheets/bragi.html" rel="facebox" />
</map>
<a href="wp-content/themes/default/sheets/bragi.html" rel="facebox">LINK</a>
</div>

If you notice in that code, i have a regular text link at the bottom which is there for testing, and it works with no problem, so i am fairly confident that i have Facebox itself set up and working properly.

In other words this problem only occurs when i am linking from an area map applied to an image.

I found someone else here having a similar problem with Lightbox:

http://www.dynamicdrive.com/forums/archive/index.php/t-18039.html

Their fix seemed to be a tweak of the .js which is well beyond my experience...

Any help would be hugely welcome and very appreciated.

Many thanks to all of you.

:)

[jscheuer1]

Since Facebox requires a link, and jQuery allows for remote clicking of links, you can do - put this anywhere on your page, it will not be seen or affect the layout:


<a id="proxy" rel="facebox" style="display:none;"></a>

Then for your area tag, do:


<area shape="circle" coords="185,106,9" href="wp-content/themes/default/sheets/bragi.html"
onclick="jQuery('#proxy').attr('href', this.href).click();return false;" />

You only need one 'proxy' to handle as many area tags as you like, because the onclick code of the area tag also copies that area tag's href attribute to the proxy right before activating the proxy's click.

[sub]

John, thank you so much. Really appreciate your kindness.

All working now.

[mosesmcgee]

Hello!

Many thanks for proxy solution to the Facebox image map problem. This is working for me perfectly in IE7 and FF.

However, IE6 is still ignoring the Facebox files and opening the content in the browser itself.

Does anyone have any advice on an alternate code or work around for IE6 users?

[jscheuer1]

Works here in IE 6. What sort of IE 6 are you using? Does facebox work at all in it?

However, there is a simpler solution than the one I originally posted here. Instead of a proxy, just add area tags to the initialization (addition highlighted):


<script type="text/javascript">
jQuery(document).ready(function($) {
$('area[rel*=facebox]').facebox();
$('a[rel*=facebox]').facebox()
})
</script>

[ian_batten]

Hi guys,

I'm seeming to have no luck with this at all. I've tried both the methods in this post to get facebox to display on an image map, but neither seem to work.

The first one, when I click on the link, nothing happens at all. And with the second method, when I click on the link, the facebox does pop up for half a second or so, but then the remote.html page just shows in the browser, as the file itself.

Any ideas what's going on here?

Also I'm using firefox if that's any help.

Thanks in advance!

[jscheuer1]

Please post a link to the page on your site that contains the problematic code so we can check it out.

[ian_batten]

Sure, it's http://tinyurl.com/n6pa6k

If you click on the "vip" option at the top, that's the link that should be calling for facebox.