Saturday, August 1, 2009

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.

8 comments:

Jean said...

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

Baeta said...

Thanks man. Simple and work perfectly!

LeE said...

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

Lauraine said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 player| html5 video player

Lauraine said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 player| html5 video player

hiram said...

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

Meldraw said...

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

h_charles67 said...

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.