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:

OpenID Jean said...

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

April 30, 2011 at 4:33 PM  
Blogger Baeta said...

Thanks man. Simple and work perfectly!

November 21, 2011 at 4:40 AM  
Blogger LeE said...

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

February 4, 2012 at 9:05 AM  
Blogger 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

March 12, 2012 at 10:32 PM  
Blogger 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

March 12, 2012 at 10:33 PM  
Blogger 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

March 18, 2012 at 7:01 AM  
Blogger Meldraw said...

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

March 22, 2012 at 6:40 AM  
Blogger 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.

November 11, 2012 at 9:21 AM  

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home