Light Box Not Working.

Question

tangara 0 Newbie Poster

14 Years Ago

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>

javascript

2 Contributors
1 Reply
90 Views
13 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by network18

Reply to this topic

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.

network18 15 Practically a Master Poster · Answer 1 · 2009-11-20T16:29:20+00:00

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>