Member Avatar for tangara

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
  • 90 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by network18
Member Avatar for network18

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.