How to: Add Lightbox Functionality to an Image Map

18th November 2010

I recently encountered a problem adding a lightbox function to an image map.

The client wants to display thumbnail images of his work which overlap as if you’d laid a bunch of polaroids down on a table. Initially he wanted to have a full scale version of that picture appear on hover but we had to scrap that on the grounds the thumbs were so close together and covered too much of the page to make this work properly ie. so that you could get to every image without it being covered by the previous hover popup. So, I thought it would be easy enough to tweak his original rollover idea and insist that the thumbnail had to be clicked to bring up the full size image. That way, when you’re done you can simply exit the preview and select another.

Immediately I moved to source a lightboxing script that would make my life easier, give us something sleek and make the interface as easy to use as possible so I returned to my old friend the Milkbox, which was seemingly perfect for the task in hand. I copied over the files, linked the javascript and css files and ran a test using a plain image. Worked great, I’m happy and smiling.

But now comes the tricky bit. Because the images are all overlapping and have been supplied by the client in the exact format he wants them to be displayed, I am going to have to use an image map in order to create the links. I created my hotspots and linked them to the full size images I had prepared earlier, then came to make them open in the Milkbox window by adding the appropriate rel tag:

I know you’re now wondering where the problem is. It should work fine, but it doesn’t because the image map cannot parse the rel tag I have used. There are various hacks out there but in its standard form Milkbox and many many other lightboxes cannot be used with image maps. After a great deal of searching I discovered that I could use Lightwindow because it is called using a class instead and so that is what I have now used, although it is still an issue if I want to use the gallery function instead of displaying individual images:

If anyone has any better fixes I would be glad to hear them, but in the meantime you can download Lightwindow from http://www.p51labs.com/lightwindow/

I wish I had found Jo earlier. We wanted to progress from making simple text edits to getting more out of the CMS. After a very enjoyable training session, we can now design new pages and keep the website organised. Excellent.

(Margaret Hildreth)