I'm having trouble figuring out how to solve this issue. I have an image that functions as a thumbnail, and when clicked on, a larger version pops up. The setup works perfectly for me, but I would like to add a fade-in effect when the image is clicked, in addition to the popup.
<a href="javascript:void();" onclick="document.getElementById('image1').style.display='block'; document.getElementById('image1_lightbox').style.display='block';">
<div class="thumbnail"><img src="image1.jpg" /></div>
</a>
<div id="image1" class="underlay" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
</div>
<div id="image1_lightbox" class="lightbox">
<a href="javascript:void();" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
<div><img width="100%" height="100%" src="image1" /></div>
<div style="padding-left:6px; padding-bottom:8px; text-shadow:0.1em 0.1em #eee;">Some text asdasdasdasd.</div></a>
This is my CSS for the lightbox and underlay classes:
.underlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}
.lightbox{
display:none;
position:fixed;
top:100px;
left:25%;
width:50%;
z-index:100000;
background-color:#fff;
box-shadow:0px 0px 10px 5px #161616;
text-decoration:none;
}