I have created a custom image viewer box that overlays a thumbnail gallery page. The image viewer should appear when a user clicks on a thumbnail.
However, currently, the viewer only pops up briefly and then disappears again. I am looking for a way to make the viewer stay visible once it is clicked.
The functionality is implemented using an external .js file.
Here is the onclick event snippet:
<div class="thumb_box">
<a href="" alt="gallery thumb" onclick="invokeViewer()">
<img class="thumbnail" src="../thumbs/jacob/jacob1.png" />
</a>
</div>
This is the JavaScript function being called:
function invokeViewer(){
var viewerBack = document.getElementById('imagebox_foreground');
var viewerFore = document.getElementById('imagebox_background');
var currentImage = document.getElementById('current_image');
viewerBack.style.visibility='visible';
viewerFore.style.visibility='visible';
currentImage.style.visibility='visible';
return false;
}
This is the HTML structure of the Viewer Divs:
<div id="imagebox_foreground" style="visibility:hidden">
<img id="current_image" style="visibility:hidden" src="imageurl.jpg" />
</div>
<div id="imagebox_background" style="visibility:hidden"></div>
And here is the CSS for the Viewer Div:
#imagebox_foreground{
position:absolute;
left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:transparent;
z-index:992;
}
#imagebox_background{
position:absolute; left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:black;
border-right:solid 4px rgb(40,40,40); border-left:solid 4px rgb(40,40,40);
opacity:.85; filter:alpha(opacity=85);
z-index:991;
}
#current_image{
display:block;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}