Using LightBox with Image Maps

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){ node.style.visibility = '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]; }).
         uniq();
            
      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.