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-09-2011, 07:27 PM
I'm using the same code and Script but the I can't display an HTML file inside the Lightbox is it Possible?

03-10-2011, 12:45 AM
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 any encoding 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: http://www.grunn.se/graphics.html

11-14-2011, 02:35 PM

in two places is wrong. They both should be: