SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Fancybox on Image Map Items

    I'm attempting to use an image map to create a series of links that all open to a Fancybox inline lightbox. So when a link in the image map is clicked, the content of a hidden div appears in the lightbox. Doesn't seem like it should be all that complicated.

    Image map code:
    HTML Code:
    <map id="_Image-Maps_9201211012043314" name="Image-Maps_9201211012043314"><area shape="rect" coords="0,360,50,410" href="#map1" class="fancybox" alt="" title=""    /></map>
    Hidden div code:
    HTML Code:
    <div id="#map1" style="display: none;">Location 1</div>
    Fancybox code (in head):
    HTML Code:
    <script type="text/javascript">    $(document).ready(function() {        $(".fancybox").fancybox();    });</script>
    What happens when I click on the image map link is the lightbox opens, but with the error message "The requested content cannot be loaded. Please try again later." It seems as though Fancybox is looking for an a tag and following the href to get the ID of the div to display inline, but because that a tag doesn't exist (image map tag instead) it can't load the content. That's my theory anyway.

    Has anybody ever run into this before or familiar enough with Fancybox/jQuery to offer up a suggested fix?

    Thanks!
    Jeff
    TAKE A WALK OUTSIDE YOUR MIND.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure that fancybox supports image maps... they're a bit ... yuck anyway.

    Another solution that might work well for you is just overlaying links over the top of an image, it's probably not much more work than doing an image map and will be much more accessible and importantly in your case, much easier to get to work with Fancybox.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Good point. I'm not exactly a fan of image maps but this is a quick and dirty project that I thought might be able to make them work. I'll do some absolute positioning with real links on the image and that should be just fine.

    Thanks for the help!
    TAKE A WALK OUTSIDE YOUR MIND.

  4. #4
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Turns out the image map idea will work, but it helps if I declare the id of the content div correctly (without the #)

    HTML Code:
    <div id="map1" style="display: none;">Location 1</div>
    TAKE A WALK OUTSIDE YOUR MIND.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    aha, yes! I didn't even notice that.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


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
  •