Results 1 to 8 of 8

Thread: Facebox and image map problem

  1. #1
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Facebox and image map problem

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ebox/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:

    Code:
    <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/a...p/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.


  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <a id="proxy" rel="facebox" style="display:none;"></a>
    Then for your area tag, do:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    sub (02-08-2009)

  4. #3
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

    All working now.

  5. #4
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Facebox and Image Map Problem: IE 6

    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?

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #8
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •