Home/ Questions/Q 8428025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T04:56:26+00:00

I have been stumbled on this for a while and after a few weeks

  • 0

I have been stumbled on this for a while and after a few weeks of research I feel it safe to ask for help here.

What I am trying to do is this: User clicks an image> Light box displays larger image > Larger image has a hotspot with a link to another page.

Is this possible? It seems simple enough but I can’t seem to get it working. Here is the code for reference.

<a href="images/createaccount_img.jpg" rel="lightbox" usemap="#Map" map name="Map" id="Map"><area shape="rect" coords="323,205,567,361" href="URL LINK 1" target="_blank" /><area shape="rect" coords="995,613,1191,668" href="URL LINK 2" target="_blank" > <img src="images/panel_login_11.jpg" width="152" height="27" alt="" />

SOLUTION: the best option was to use http://fancybox.net/ which allows you to add many extra elements inside the box including: Divs, iframes, html and more! Thanks again everyone.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all: map is a separate tag. So your code would never have worked.
    This is how you normally use a map:

    <a href="images/createaccount_img.jpg" rel="lightbox">
  <img src="images/panel_login_11.jpg" width="152" height="27" alt="" usemap="#map" />
</a>

<map name="map" id="map">
    <area shape="rect" coords="323,205,567,361" href="URL LINK 1" target="_blank" />
    <area shape="rect" coords="995,613,1191,668" href="URL LINK 2" target="_blank" > 
</map>

    That being said, I then figured to place a attribute data-usemap on the link that contains the url to the full-size image. Like this: 

    <a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-1.jpg" rel="lightbox" data-usemap="#map"><img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-1.jpg" alt=""></a>

    Then I modified lightbox.js to read this attribute usemap: $link.attr('data-usemap') and set that attribute $image.attr('usemap', _this.album[imageNumber].usemap);

    Now the full-size image has the correct usemap set.
    But it still does not work!! I think this is because of div’s that overlay on this image.
    Here is the fiddle I’ve worked on. Search for //xxx added to find the 2 lines I added. Maybe someone else could work on it some more.

    In other words, I don’t think it will be easy to create a mod over an unmodified lightbox.js.

    A also want to note that a lot of scripts like lightbox also resize the full-size image to fit the screen (lightbox does not do this as far as I could see): THEN you would also need javascript to re-calculate the coordinates in the map(s) I guess.

    • 0