0

Hi,

I'm trying to apply light box effect. When the user click on the thumbnail size photo, it will pop up a bigger want and then the background will all blackout...... It's just not working and the the imgage won't show up at all.

Hope someone can point out my mistakes. tks.

Here's my code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<title>Javascript test</title>
<script language="javascript">
document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';
</script>
<style type="text/css">

body {
margin: 0;
padding-left: 200px;
padding-right: 190px;
min-width: 240px;
}

#header, #footer {
margin-left: -200px;
margin-right: -190px;
}

.column {
position: relative;
float: left;
}

#center {
padding: 0 20px;
width: 100%;
}

#left {
width: 180px;
padding: 65px 10px;
right: 240px;
margin-left: -100%;
}

#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}

#footer {
clear: both;
}

# buffer {
padding: 35px 0; }

#content-main {
margin-top: 85px;
margin-left: 100px;


* html #left {
left: 150px;
}


table { border: 1px solid #ffffff;
border-spacing: 2px;
margin-left: auto;
margin-right: auto;
padding: 2px;
width: 95%; }

td { border: 1 px solid #808080;
margin : 2px;
padding : 1px;
}

.black_overlay{
position: relative;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
position: relative;
top: 25%;
left: 25%;
width: 100%;
height: 100%;
padding: 16px;
border: 16px solid orange;
background-color: white;
overflow: auto;


</style>
</head>

<body>

<div id="header">This is the header.</div>
<div id="center" class="column">
<div id="content-main">
<div id="buffer"></div>
<table>
<tr>
<td>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="CIMG0600.JPG"alt="1"height="200" width="200"></a>
<div id="light" class="white_content"><img src="CIMG0600.JPG"alt="1"height="100" width="100"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

<td><img src="CIMG0627.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG1014.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG1429.JPG"alt="1"height="100" width="100"></td>
</tr>
<td><img src="CIMG0500.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG1020.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG0710.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG0616.JPG"alt="1"height="100" width="100"></td>
</table>
</div>
<div id="left" class="column">
<h2>About Us</h2>
<p></p>
</br><h3>Our products & services:</h3>
</div>
<div id="right" class="column">
<p></p>
</div>
<div id="footer">
</div>
</body>
</html>
2
Contributors
1
Reply
3
Views
7 Years
Discussion Span
Last Post by network18
0

There was some unnecessary html and body end tag lying somewhere in the middle of the code and the bold tag in between the javascript function call. So your improved code below -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<title>Javascript test</title>
<script language="javascript">
document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';
</script>
<style type="text/css">
body {
margin: 0;
padding-left: 200px;
padding-right: 190px;
min-width: 240px;
}
#header, #footer {
margin-left: -200px;
margin-right: -190px;
}
.column {
position: relative;
float: left;
}
#center {
padding: 0 20px;
width: 100%;
}
#left {
width: 180px;
padding: 65px 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
# buffer {
padding: 35px 0; }
#content-main {
margin-top: 85px;
margin-left: 100px;
}
* html #left {
left: 150px;
}
table { border: 1px solid #ffffff;
border-spacing: 2px;
margin-left: auto;
margin-right: auto;
padding: 2px;
width: 95%; }
td { border: 1 px solid #808080;
margin : 2px;
padding : 1px;
}
.black_overlay{
position: relative;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
position: relative;
top: 25%;
left: 25%;
width: 100%;
height: 100%;
padding: 16px;
border: 16px solid orange;
background-color: white;
overflow: auto;
}
</style>
</head>
<body>
<div id="header">This is the header.</div>
<div id="center" class="column">
<div id="content-main">
<div id="buffer"></div>
<table>
<tr>
<td>
<a href = "javascript:void(0)" onclick "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="CIMG0600.JPG"alt="1"height="200" width="200"></a>
<div id="light" class="white_content"><img src="CIMG0600.JPG"alt="1"height="100" width="100"><a href = "javascript<b></b>:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a></div>
<div id="fade" class="black_overlay"></div>
</td>

<td><img src="CIMG0627.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG1014.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG1429.JPG"alt="1"height="100" width="100"></td>
</tr>
<td><img src="CIMG0500.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG1020.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG0710.JPG"alt="1"height="100" width="100"></td>
<td><img src="CIMG0616.JPG"alt="1"height="100" width="100"></td>
</table>
</div>
<div id="left" class="column">
<h2>About Us</h2>
<p></p>
</br><h3>Our products & services:</h3>
</div>
<div id="right" class="column">
<p></p>
</div>
<div id="footer">
</div>
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.