Call 01865 238 252 | cPanel Login

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/

Leave a Reply

What our customers say:

I would highly recommend Hut Six Digital for your website implementation. Jo has been fantastic to work with and has exceptional knowledge in her field. She is friendly, reliable and professional, which has resulted in our fantastic new website launch. Her training was clear and concise, and I know she will be on the end of the phone or email should I need her for a little refresh. She has enabled us to take full control of our new website, which was something other companies have been unable to offer. Excellent value for money too!

Christina Canning (SMS Alarms Ltd, Thatcham)

Jo has been personable and efficient in setting up my website. She did a great job of understanding what I wanted and providing guidance from her wealth of experience. She has explained things in a non-technical way and has been very responsive, patient and flexible in working with me. In short, Jo is great value for money and easy to work with.

Vanessa Rhone (Venus Works, Oxford)

Excellent, efficient service from Jo. Highly recommend.

Xan Rice (Journalist, Oxford)

I am not exactly a technophobe but due to previous experiences of pressing buttons that I have no business pressing I have shied away from doing thing to update or improve my site. I have called on Jo Cox’s expertise several times and she is always quick, efficient and gets you back on track whilst also calming you down. I can honestly say that there is no one else I would call on in an emergency to sort out problems with my website. I have never had a bad experience with Jo’s services or with Jo as the service provider.

Lisa Bentley (Writer, Liverpool)

Jo has been amazing. Through 1-2-1 training sessions she has helped me to make significant improvements to my website functionality. This has not only been cost effective but it also has empowered me to use the skills that I have gained to edit my website myself in the future. She has simplified what I thought would be tricky tasks. I will definitely continue to work with her in the future and I couldn’t recommend her highly enough.

Felicity Wood (Yoga Instructor, Bicester)

Jo took my simple brief outline of what I wanted and turned it into everything I wanted and more. Jo was very professional, efficient and she was patient and understanding with the fact that I was not knowledgeable about building websites or what’s involved. By the end of it Jo had given me and my team a training session around how to manage the website. I would highly recommend her!

Sharon Mulholland (Sandcastle Mortgages, Kidlington)

Jo was completely fantastic! I’d been struggling to make a WordPress blog design work and was completely stumped. I made an enquiry to Jo about some help, and she replied within 24 hours. It was easy to agree on a price for the things that needed to be done, and she had fixed everything within 48 hours of the original enquiry. I had thought my problem was too small for someone to help with it, but I was pleasantly surprised that Jo was happy to sort out the small issues with my site for an extremely reasonable fee. Throughout the process, Jo was efficient, effective and stayed in regular communication. She answered all of my questions, even the really idiotic ones, and nothing was too much trouble. The entire experience was great and I would recommend her in a heartbeat to anyone who needs help with a website project – big or small. She is, in short, superb at what she does.

Imogen Goold (Blogger, Oxfordshire)

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 (JP Hildreth Ltd, High Wycombe)