View Full Version : Lightbox image viewer 2.03 + image mapping

04-26-2007, 07:25 PM
1) Script Title: Lightbox image viewer 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Probem: First of all thnx alot for read that, actully i want to use this script for image map, but as im just a bigner coder so i am unable to fit this script in image map.

map code..

<img src="http://store.digitalscrapbookplace.com/images/alphas/06_AlphaBlocks_Lower.jpg" USEMAP="#test" BORDER=0>
<map name="test">
<area shape="rect" coords="53,45,199,206" href="a.jpg" alt="">


I want , when i click on map area , that "A" in above code , than "a.jpg" which will in server come in LIGHT BOX IMAGE VIEWER.

so im making href = "#" , so that "a.jpg" open with on click function.. Now it will be something like that..

<area shape="rect" coords="53,45,199,206" href="#" onclick= " now how to call here "Lightbox funcion , that open "a.jpg" in veiwer ?">

thanx in advance for sorting it out....

04-29-2007, 11:34 PM
any 1 , for help :(

04-30-2007, 02:01 AM
2.03 supports area tags. So all you need to do (besides installing the script as instructed) is add the rel attribute to your area tag:

<area shape="rect" coords="53,45,199,206" href="a.jpg" rel="lightbox" alt="">

05-01-2007, 12:38 PM
hey jscheuer1 thnxxxxxxxxxxxxx in loads , its working now , yahooooooooooo , tumbz up , thnx again..

11-05-2008, 03:10 PM
I`ve got the same problem.
It`s fixed for the IE7 but not for Opera.
The screen is getting darker, but no picture shows up...
KLICK (http://www.danjo78.de/main/Gallery/GFriends2.html)
Using Opera 9.60 build 10447
Need help with that please!
Here`s the code:

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" href="../../css/lightbox.css" type="text/css" media="screen" />

<script src="../../js/prototype.js" type="text/javascript"></script>
<script src="../../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../../js/lightbox.js" type="text/javascript"></script>

<style type="text/css">
body {
background-color: #dfcfc0;
background-image: url();

<body onload="MM_preloadImages('images/menu_on.gif'); initLightbox()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="right"><img src="../GalleryFiles/GFriendsNEW.jpg" width="620" height="408" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="337,6,377,57" href="http://www.danjo78.de/main/Files/ME.jpg" rel="lightbox[test]" alt=""/>
<area shape="rect" coords="382,6,422,57" href="http://www.danjo78.de/main/GalleryFiles/dave.jpg" rel="lightbox[test]" alt=""/>
<area shape="rect" coords="425,6,465,57" href="http://www.danjo78.de/main/GalleryFiles/juli.jpg" rel="lightbox[test]" alt=""/>


11-05-2008, 07:44 PM
First of all, you are not using Lightbox v2.03a (the thread you chose to post in is about that script), you are using v2.04.

Anyways, there appears to be a problem with the script. I'm not sure whether or not downgrading to 2.03a would work or not, and 2.04 has its advantages. So you can fix the 2.04 version. Find this function (around line 203 in the lightbox script) and add the highlighted line:

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]; }).

while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }

// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();


11-05-2008, 08:02 PM
Thanks a lot man...you`re the best!!!
No solution after 5hours of searching the web in 10.000 different Forums and Blogs...
and then 1 Post to rule them all!!! :D
PS: Yes it was my fault. I`m using 2.04, but i also tried 2.03a. Doesn`t worked either...
And I don`t want to start another thread ;)

04-24-2010, 11:59 PM
Really great work, this fix works pretty nice! Regards

03-10-2011, 12:45 AM
I'm using the same code and Script but the I can't display an HTML file inside the Lightbox is it Possible?

No. Use Lightwindow:


Or FancyBox:


Or any of the great many other lightbox type scripts out there that support HTML in the box.

04-25-2011, 04:42 PM
Thanks a lot jscheuer1, this works great. Is it possible to group images in an image map? I tried to do it with a "lightbox[group]" but its not working. Once again thanks for all your help.


04-26-2011, 05:29 PM
Thanks a lot jscheuer1, this works great. Is it possible to group images in an image map? I tried to do it with a "lightbox[group]" but its not working. Once again thanks for all your help.


In theory it should work. I'm not sure which version of which script you're using though:

Please post a link to a page on your site that contains the problematic code so we can check it out.

04-26-2011, 06:36 PM
I am using lightbox 2.05 and here is a part of the code with imagemap

<area shape="poly" coords="530,28,542,161,649,149,637,24" href="images/00_salud_019_6_26_leaflets.jpg"rel="lightbox"alt">
<area shape="rect" coords="126,16,216,154" href="images/00_Homes.jpg"rel="lightbox"alt">
<area shape="poly" coords="60,134,3,76,59,16,79,34" href="images/00_strong_bo_1.jpg"rel="lightbox"alt">

04-30-2011, 04:43 AM
If what I'm about to tell you doesn't allow you to solve it and you want more help, I'd still want a link to your page.

However, the code in your post isn't standards compliant, and shows no attempt at creating a lightbox group.

There need to be spaces between the attributes at the end of each area tag and the alt attribute, which is allowed to be empty, needs at least a closing quote. That's all just to get it to be standards compliant. To make a lightbox group, you need to add the group syntax.

So, to simply meet standards with the existing code from your post:

<area shape="poly" coords="530,28,542,161,649,149,637,24" href="images/00_salud_019_6_26_leaflets.jpg" rel="lightbox" alt"">
<area shape="rect" coords="126,16,216,154" href="images/00_Homes.jpg" rel="lightbox" alt"">
<area shape="poly" coords="60,134,3,76,59,16,79,34" href="images/00_strong_bo_1.jpg" rel="lightbox" alt"">

To make all three area tags part of a group, let's call it themapgroup, then do it like so:

<area shape="poly" coords="530,28,542,161,649,149,637,24" href="images/00_salud_019_6_26_leaflets.jpg" rel="lightbox[themapgroup]" alt"">
<area shape="rect" coords="126,16,216,154" href="images/00_Homes.jpg" rel="lightbox[themapgroup]" alt"">
<area shape="poly" coords="60,134,3,76,59,16,79,34" href="images/00_strong_bo_1.jpg" rel="lightbox[themapgroup]" alt"">

There could still be other problems. But this much needs to be fixed first.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

05-02-2011, 05:55 PM
Hy i have the same issue. I did the script modification and here is my code, but stiil doesn't work, if you could recomand me the right lightbox version or tell me where i went wrong:

" The script loader "

<!-- Script Lightbox -->
<script type="text/javascript" src="Elevi/HTML/js/prototype.js"></script>
<script type="text/javascript" src="Elevi/HTML/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="Elevi/HTML/js/lightbox.js"></script>
<!-- /Script Lightbox -->

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

" and the actual code "

<img src="Download/Frame.png" width="1079" height="707" usemap="#map1" />
<map name="map1" id="map1">
<area shape="poly" coords="761,332,759,350,752,369,730,365,713,354,741,339,719,343,723,326,743,326" href=download/dirigu/dirigu.jpg rel="lightbox" alt=""/>
When i inser the " rel = " inside the "< area shape ... >" my dreamweaver does not recognize it as a functional code ... !!!

what am i doing wrong

05-02-2011, 05:59 PM
Never mind, fixed it

05-03-2011, 05:07 PM
Here is the script for the entire page, the image map is at the end (I should have included this at the very start, sorry about that). Whenever I add a [group] to it, the images no longer open up.

background-image: url(images/background.jpg);


<embed src="music/Si_Me_Quieres_Escribir.mp3" width="32" height="32" border="0"></embed>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td><div align="center">
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<td><div align="center"><img src="images/main_banner.png" alt="exhibit banner" width="788" height="119" /></div></td>
<td><div align="center"><p><br /><img src="images/graphic.png" alt="postcard graphic" width="703" height="191" border="0" usemap="#Map" href="images/00_home_front.jpg" /></div></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<td width="50%"><p align="center"><img src="images/Poem.gif" width="385" height="290" /></td>
<td width="50%"><div align="center"><img src="images/Credits.gif" width="385" height="290" /></div></td>
<td><div align="center">
<h2><strong><a href="page_01.html">Enter Exhibit</a></strong></h2>
<td><h5 align="center"><strong><u><br />Newman Library of Baruch College Copyright Information</u></strong>
<h6 align="left" class="frontP">The Newman Library of Baruch College is not aware of any United States copyright or any other restrictions on the original material in this online exhibit. However, some of the content may be protected by U.S. Copyright Law (Title 17 USC). Also, the reproduction of some materials may be restricted. Responsibility for making an independent legal assessment of an item and securing any necessary permissions rests with persons desiring to reproduce or use the items.</h6>
<h6 align="left" class="frontP">We encourage the use of these materials under the &quot;Fair Use&quot; provisions of the 1976 Copyright Act. For the purpose of research, teaching, and private study, you may reproduce items from the exhibit without prior permission on the condition that proper attribution of the source is provided in all copies.</h6>
<td><div align="center"><a href="http://newman.baruch.cuny.edu/search/digitalcollections.html" target="_blank"><p><img src="images/digital_collections_logo.gif" alt="digital collections icon" width="102" height="95" border="0" /></a></div></td>

<map name="Map" id="Map">
<area shape="poly" coords="530,28,542,161,649,149,637,24" href="images/00_salud_019_6_26_leaflets.jpg" rel="lightbox" alt"">
<area shape="rect" coords="126,16,216,154" href="images/00_Homes.jpg" rel="lightbox" alt"">
<area shape="poly" coords="60,134,3,76,59,16,79,34" href="images/00_strong_bo_1.jpg" rel="lightbox" alt"">
<area shape="poly" coords="85,20,64,147,125,157,126,26" href="images/00_aviation.jpg" rel="lightbox" alt"">
<area shape="poly" coords="218,30,235,14,250,28,259,64,237,73,245,100,251,119,219,153" href="images/00_child_3.jpg" rel="lightbox" alt"">
<area shape="poly" coords="261,62,252,28,336,3,343,25,318,44" href="images/00_France.jpg" rel="lightbox" alt"">
<area shape="poly" coords="239,72,348,37,356,64,351,66,377,151,273,182" href="images/00_home_front.jpg" rel="lightbox" alt"">
<area shape="poly" coords="393,51,365,12,323,43,357,62" href="images/00_France_2.jpg" rel="lightbox" alt"">
<area shape="poly" coords="499,134,389,168,356,65,503,18,470,49,509,32,473,51,503,15,469,50,499,36,469,53" href="images/00_nacionales_3_final_bo_1.jpg" rel="lightbox" alt"">
<area shape="poly" coords="410,47,413,14,495,19" href="images/00_home_front_2.jpg" rel="lightbox" alt"">
<area shape="poly" coords="496,139,492,166,427,162" href="images/00_home_front_2.jpg" rel="lightbox" alt"">
<area shape="poly" coords="545,163,520,171,473,53,528,27,566,11,531,29" href="images/00_rep_10.jpg" rel="lightbox" alt"">
<area shape="poly" coords="643,24,698,50,657,149,652,148" href="images/00_sal_7.jpg" rel="lightbox" alt"">
<area shape="poly" coords="579,160,654,154,639,185" href="images/00_sal_7.jpg" rel="lightbox" alt"">

05-05-2011, 06:23 AM
OK, this is the same problem. But the code has changed a little for lightbox 2.05. And I'm not sure which version of the 2.05 script you're using. It now apparently has two, the lightbox.js version and the lightbox-web.js version.

But that doesn't matter too much. Whichever one is used, you must change:




This only appears once in lightbox.js (line #222), twice in lightbox-web.js (line #216 and line #222).

05-09-2011, 04:27 PM
Thanks a lot! It works now. Although I noticed a strange new issue. All of the apostrophes, dashes, quotation marks and other similar marks were transformed into question marks inside of a square.

05-09-2011, 05:00 PM
Which apostrophes, dashes etc.?

Did you add or remove or change a tag to or from the page that looks anything like this:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">


I ask because it sounds like an encoding issue unrelated to this change, but which possibly crept in as a result of how something was saved during the change or something changed around the same time. It could even be a change on the server. If you cannot sort that out, I'd need a link to the page:

Please post a link to a page on your site that contains the problematic code so we can check it out.

05-17-2011, 04:58 PM
Don't worry about it, I fixed the problem manually. I changed the code in word pad so I think that had something to do with it (originally I used dreamweaver).

In any case thanks a lot! Your help is really appreciated.

05-17-2011, 05:55 PM
Oh yeah, WordPad will use things like:

“, ”, ’, and ‘

that can cause problems in some encodings if they're not represented by that encoding's byte structure for that character.

11-14-2011, 10:23 AM

I had the same problem with roadtrip in lightbox 2.05 and I still have a problem itīs that my "nextlable" doesnīt show. I have the nextlabel gif i my images map. it is irritable because I know I forgot something but do not know what.

my code is:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }

<p><img src="utskick/images/graphics.jpg" alt="graphics" width="896" height="717" border="0" usemap="#Map2" longdesc="http://www.grunn.se/graphics.html" />
<map name="Map2" id="Map2"><area shape="rect" coords="258,520,278,540" href="mailto:kenna@grunn.se" /><area shape="rect" coords="233,521,253,541" href="https://twitter.com/#!/@Grunnfilm" /><area shape="rect" coords="209,520,231,540" href="http://www.facebook.com/pages/Thick-as-****-in-The-Neck-of-a-Bottle/250895361620623" />
<area shape="rect" coords="118,573,784,678" href="images/carlsberg.jpg" rel="lightbox"[roadtrip]"alt"">
<area shape="rect" coords="118,573,784,678" href="images/somersby.jpg" rel="lightbox"[roadtrip]"alt"">

and the site has this url: [BROKEN LINK REMOVED]

11-14-2011, 02:35 PM

in two places is wrong. They both should be:


10-13-2016, 09:22 AM
Discussed solution work fine with image maps.
But how I may to highlight the area under mouse? I want that user see selected ares in image map.

10-13-2016, 01:13 PM
Discussed solution work fine with image maps.
But how I may to highlight the area under mouse? I want that user see selected ares in image map.

That's actually a limitation of image maps and has nothing to do with Lightbox. I've seen various approaches to this. It depends to a degree on what you mean by "selected areas" though. Technically an a tag or (in this case) an area tag is selected when it receives focus, generally on mouse down, but it can also occur when it's selected using the tab key in browsers that support that method. Ordinary links use the :active and/or (depending upon what one wants the trigger to be) sometimes the :focus pseudo class in css to either underline or change the color, outline, border, background, and/or background image. None of this is available for an area tag. What I have seen done is using javascript to change the usemap image tag's src attribute. How best to go about this would depend upon what Lightbox and other code is in use for the page. What you do though is make up different images for that image tag, each one needs to be identical except that one has one area highlighted, another has another area highlighted and so on for each area that you want to have this work for. So - say you have 4 area tags, you need five images for the usemap image tag. One with no highlighting and one each that highlights each area that you want to be able to have get highlighted.

Once you have that, for a map with just two areas that you want to do this for, it could go somewhat like so:

<img id="formap2" src="graphics0.jpg" alt="graphics" width="896" height="717" border="0" usemap="#Map2">
<map name="Map2" id="Map2">
<area onmousedown="document.getElementById('formap2').src = 'graphics1.jpg';" shape="rect" coords="118,573,784,678" href="images/carlsberg.jpg" rel="lightbox[roadtrip]" alt="">
<area onmousedown="document.getElementById('formap2').src = 'graphics2.jpg';" shape="rect" coords="118,573,784,678" href="images/somersby.jpg" rel="lightbox[roadtrip]" alt="">
<script type="text/javascript">
(function(){ /* preload the alternate map images */
var ims = ["graphics1.jpg", "graphics2.jpg"], i = ims.length;
while(--i > -1){
var nim = new Image();
nim.src = im;

But that doesn't account for returning the image to the original when something else on the page is selected, and it only accounts for mouse down. It's much easier to write this using jQuery (which the latest versions of Lightbox use anyway). But without knowing what you're using, I'm not going to go much further.

One thing to consider is - how important is this? I ask because if the image map image is large in byte size, so too will the alternate highlighted versions need to be. That can generate a lot of overhead for the page and, even with preloading, can cause a lag when switching out the images. Because if a highlight image is called for before it has preloaded, it will have to load at that time.

There are other approaches - some people have abandoned the image map and used ordinary links with image slices to get a similar effect, some will overlay the map with smaller linked images positioned absolutely. But these are all a bit tricker to compute positioning for.

If you want more help, please post a link to the page on your site where you're trying to do this.

10-13-2016, 02:31 PM
Thanks for reply.
Here is a demo page (http://www.kreator-bud.com/test02s.html). If mouse is above the flat, is highlight.
For highlighting I use a jQuery maphilight (http://davidlynch.org/projects/maphilight/docs/)
If I don't use lightbox (as at the link - there scripts for lightbox commented), highlighting work correct, You may to see...
But if to add the scripts for lightbox (uncomment lines 11-14), than highlighting do not work (but lightbox work fine- after clicking on flat at the building plan appear larger plan of flat).

I very want to combine both: highlighting and lightbox :)
May be, You have some ideas for this?

10-13-2016, 03:06 PM
One problem you're having is that the prototype/scriptaculous scripts used with the lightbox script conflict with the jQuery javascript used with the highlighting script. First thing I would try is updating to the latest version of Lightbox:


It uses jQuery. Now you will only need one jQuery link on the page, then the highlight code and then the new lightbox.js script, use the new lightbox script's images and css as well. Leave your current demo in place and I will test this out to see if it works. If you want to try it out, feel free, but as I say, leave the current demo alone and make up a new one. That way, if we have any problems, we can work from the original demo you have, as there is a way to remove the conflicts, but updating to a conflict free setup is better if it works.

10-13-2016, 03:41 PM
OK, got it working here. You need to change some other things. The lightbox script tag must now go at the end of the page, and instead of rel="lightbox" we must use data-lightbox="lightbox"

Other than that, from the distribution archive from:


just copy its js, css, and images folders from it to the folder where your page is. Then use this HTML for your page:

<meta charset="utf-8">
<title>Test page</title>
<!-- Scripts for area maphilight -->
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
<!-- css for lightbox -->
<link rel="stylesheet" href="css/lightbox.min.css" type="text/css" media="screen" />


<img id="i-bc-04" src="/images/objects/ternopil/business-center/bc04.jpg" border="0" usemap="#bc04Map" >
<map name="bc04Map" id="m-bc-04">
<area shape="poly" coords="399,142,400,89,404,69,410,53,417,44,424,36,431,29,439,23,448,18,457,16,466,13,479,11,492,13,505,16,516,22,529,27,536,33,546,42,549,48,573,82,583,102,589,117,605 ,153,616,172,621,184,632,218,636,233,639,242,528,244,527,190,460,188,460,141" href="/images/objects/ternopil/business-center/n04.jpg" data-lightbox="lightbox">
<area shape="poly" coords="531,246,641,246,651,280,658,307,673,364,674,382,682,440,682,457,686,521,546,523,528,472" href="/images/objects/ternopil/business-center/n05.jpg" data-lightbox="lightbox">
<area shape="poly" coords="327,518,487,519,515,608,515,704,545,767,535,775,528,780,515,786,503,788,490,790,479,788,467,786,457,780,448,776,442,770,438,766,427,750,408,719,389,681,370,643, 357,612,344,577" href="/images/objects/ternopil/business-center/n06.jpg" data-lightbox="lightbox">
$('#i-bc-04').maphilight({stroke: false, fill: true, fillColor: 'FF0000'});
<!-- Script for lightbox -->
<script type="text/javascript" src="js/lightbox.min.js"></script>


To save space you can get rid of the other scripts and css in the js and css folders keeping only lightbox.min.js and lightbox.min.css

Any questions or problems, just let me know.

10-14-2016, 06:38 AM
Its work fine! Thank You very much!
But file names may be lightbox.css and lightbox.js (not lightbox.min.css and lightbox.min.js)? Such files are located in distribution archive.
And, please, explaiin, why script connecting for lightbox must be at the end of file?

10-14-2016, 10:39 AM
Yes you can use the uncompressed versions of the files if you want to. Both the full and compressed versions are in there, in case you need to edit them, but generally the compressed versions load faster and may give better performance.

I'm not certain why the lightbox javascript now has to go at the end of the page. I think it's probably because of how it's written. In javascript many scripts are written to run when the document has been parsed (on load, DOMContentLoaded, document ready, etc.) But those are functions that both delay and take up memory. If you put your script at the end of the page, you don't need them. The savings is minimal, but recommended. I think that's why. All I know for sure is that it wouldn't work unless I put it there. That's also where it appears in the script's author's demo.