The Notepad is old and grody

Using LightBox with Image Maps

Scribbled  · PDF · ◊Pollen source

I ran across this while assembling the website for my brothers’ new film The Little Red Plane. Don’t ask why I needed to do use image maps in this day and age. But I did.

I decided to use the fairly awesome LightBox script (version 2.04) for certain aspects of the site, but the links that would trigger it were in an image map, which uses <area> tags instead of <a> tags. When I clicked on the links, the page would go dark but no image overlay was displayed.

The solution was found here. Apparently 2.03 worked fine with image maps but 2.04 has this regression.

To fix, open lightbox.js in a text editor, scroll down to the start() function and insert the line highlighted below:

//  start()
//  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
start: function(imageLink) {
   $$('select', 'object', 'embed').each(function(node){ = 'hidden' });

   // stretch overlay to fill page and fade in
   var arrayPageSize = this.getPageSize();
   $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

   new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

   this.imageArray = [];
   var imageNum = 0;

   imageLink.rel = imageLink.getAttribute('rel');

   if ((imageLink.rel == 'lightbox')){
      // if image is NOT part of a set, add single image to imageArray
      this.imageArray.push([imageLink.href, imageLink.title]);
   } else {
      // if image is part of a set..
      this.imageArray =
         $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
         collect(function(anchor){ return [anchor.href, anchor.title]; }).

      while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }

Save the file. Now all you have to do is add rel="lightbox" to your <area> tags, just as you would with normal links.


JeanApril 30, 2011

Thanks for this! Exactly what I was looking for. I’m using v2.05 of the script.

BaetaNovember 21, 2011

Thanks man. Simple and work perfectly!

LeEFebruary 04, 2012

Thank you very much! I was also looking for this. Solved my problem easily!

hiramMarch 18, 2012

I am currently working with lightbox2.05 and image map and your 1 line addition worked to link them up. Thank you. I also found a way to pin the image container more or less where I wanted it.

Now I would like to have the NEXT and PREV tabs appear in the box with CloseX in the same manner without the rollover needed. I found 1 hint about changing 15% in a line in the css style file, but that did not move it down to the box with CloseX, only to the bottom of the image frame. Does anyone have any ideas? Thank you Hiram Levy

MeldrawMarch 22, 2012

Perfect. Exactly what I needed, and a simple fix. THANK YOU!

h_charles67November 11, 2012

This fix didn’t work for version 2.51. The solution was to find line 286: var anchors = document.getElementsByTagName("a"); and change a to area. That will, of course, stop lightbox from working with ordinary ‘a’ tags.