I have multiple preview photos on a single page, and I wish for each preview photo to have its own lightbox which enlarges the photo. But when I open the second photo on the page, the lightbox image is the larger version of the first image on the page. I am using HTML and CSS with minimal java
This is my code for HTML
<div id="graphic">
<h2><span>Graphic Art</span></h2>
<!--Below is the code for the clickable Sloth Photo with an opening Light Box-->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="images/graphicart/sloth-small.jpg" width="200px"></a></p>
<div id="light" class="white_content"><img src="images/graphicart/sloth-large.jpg" width="600px">
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</div>
<div id="Separator">
</div>
<div id="Photo1">
<h2><span>Photography<span></h2>
<!--Below is the code for the clickable photos with an opening Light Box-->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="images/photography/art-small.jpg" width="200px"></a></p>
<div id="light" class="white_content"><img src="images/photography/art-large.jpg" width="600px">
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</div>
And the coresponding CSS is:
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 200%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 20%;
width: 54%;
height: 75%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
