Lightbox image viewer 2.03a [Archive]

mmgun999

01-03-2010, 12:11 PM

Lightbox image viewer 2.03a

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

I'm using the script above, but it doesn't work properly. When I click on the image, the screen darkens and the lightbox image appears, but the rest of page items, that should be darkened and in the background, are on top of the lightbox image and not darkened. Please help me correct it. Could the table codes conflict with the script or could it be something else? This is my code so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Portfolio Martijn Lankveld</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="SHORTCUT ICON" HREF="http://www.cineramabios.nl/icon.ico">

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<link href="style.css" rel="stylesheet" type="text/css">
<script language=javascript type='text/javascript'>
function hidediv(pass) {
/********************
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideShow.divs[i].visibility = 'hidden';
}
}
***********************/
document.getElementById(pass).style.display='none'

}

function showdiv(pass) {
/**********************************
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideShow.divs[i].visibility = 'visible';
}
}
*****************************/
document.getElementById(pass).style.display='block'

}
</script>

</head>
<body leftmargin="0" topmargin="0" OnLoad="document.form1.email.focus();">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td colspan="2"><img name="" src="img/pixel.gif" width="1" height="20" alt=""></td>
</tr>
<tr valign="bottom">
<td><span class="logologo"><strong>MARTIJN</strong>LANKVELD</span> </td>
<td align="right"></td>
</tr>
<tr valign="top">
<td><a href="javascript:opener = window.open('popup_profile.html', 'Profiel','width=415,height=600,scrollbars=yes'); opener.moveTo(0,0);opener.window.focus();">profiel</a></td>
</tr>
</table>
<br>

<br>
<table width="700" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">

<div class="project">
<div id="mylayerDiv" class="films2">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td></td>
</tr>
<tr>
<td valign="top">
<div class="filmItem">
<table width="350" border="0" cellspacing="0" cellpadding="0">

<tr>
<td><a href="images/Adver_Absolut2_choice.jpg" rel="lightbox[vodka]" title="Purification"><img src="images/Adver_Absolut2.jpg" width="350" height="227" border="0"></a></td>
</tr>
<tr>
<td valign="top" style="padding-right: 10px;">Purification</td>
</tr>
</table></div></td>
<td valign="top">
<div class="filmItem">
<table width="350" border="0" cellspacing="0" cellpadding="0">

<td><a href="images/Adver_Absolut1_choice.jpg" rel="lightbox[vodka]" title="Gas Production"><img src="images/Adver_Absolut1.jpg" width="350" height="227" border="0"></a></td>
</tr>
<tr>
<td valign="top" style="padding-right: 10px;">Gas Production</td>
</tr>
</table></div></td>

</tr>
</table>
</div>
</div>

jscheuer1

01-03-2010, 02:54 PM

You must be using z-index in some of your styles for that page. In the lightbox.css it also uses z-index. These must be increased so that they are greater than those used by the page. Try these changes (highlighted) in the lightbox.css file here:

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
}

Here:

#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1000;
}

And here:

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 500px;
background-color: #000;
}

mmgun999

05-03-2010, 03:07 PM

Thank you very much John. It works now. I'm sorry for the late reply.

Martijn