Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/
My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine.
I was creating my own custom image viewer, and everything was going smoothly until I tried to incorporate PREV and NEXT functionalities (in the fiddle, they are text but should be images). When I click on next, the picture in the viewer changes, but then my overlay div disappears.
I can confirm that the picture actually changes because if I add an alert at the end of prevImage() and/or nextImage(), I can see the updated picture. However, once I click OK, everything disappears.
I'm not sure what's causing this issue. It could be my JS or CSS causing the problem, as I'm relatively new to JS, CSS, and HTML.
Could someone explain why my div disappears after this function is executed?
Below is the JS code:
var images = Array();
var cursor = 0;
function showHide(obj) {
alert("Working");
var overlay = document.getElementById("ImgOverlay");
if (obj instanceof HTMLImageElement) {
var gallery = document.getElementById("gallery");
images = gallery.getElementsByTagName("img");
cursor = -1;
while (images[++cursor].src != obj.src) {}
putImageInViewer(obj);
overlay.style.display = "block";
} else if (overlay.style.display !== "none" && overlay.style.display !== "") {
hideElement(overlay);
}
}
function hideElement(element) {
element.style.display = "none";
}
function putImageInViewer(obj) {
var img = new Image();
img.src = obj.src;
var size = 600;
var h = img.height;
var w = img.width;
if (h <= 600 && w <= 600) {
if (h > w) {
size = h;
} else {
size = w;
}
}
if (h > w) {
document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" height=\"" + size + "\">";
} else {
document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" width=\"" + size + "\">";
}
}
function nextImage() {
if (cursor < images.length) {
cursor++;
} else {
cursor = 0;
}
putImageInViewer(images[cursor]);
}
function prevImage() {
if (cursor > 0) {
cursor--;
} else {
cursor = images.length;
}
putImageInViewer(images[cursor]);
}
Here is the CSS:
#wrap {
margin: 0 auto;
}
#wrap li {
float:left;
position:relative;
display:inline-block;
width:240px;
height:240px;
margin:10px;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0, 0, 0, .35);
overflow: hidden;
}
#wrap li div {
position:absolute;
height:0;
width:220px;
background:rgba(0, 0, 0, .45);
overflow:hidden;
bottom:10px;
left:10px;
padding: 0 10px;
line-height:50px;
color:#fff;
transition:height 1s;
}
#wrap li:hover div {
height:50px;
}
#wrap li img {
width: 240px;
height: 240px;
margin: 0px 0 0 0px;
cursor: pointer;
}
#ImgOverlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
display: none;
}
#imgnav {
position: fixed;
top: 38%;
left: 50%;
margin: -15px 0 0 -363px;
width: 730px;
height: 60px;
}
#overlay-img {
position: fixed;
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
width: 600px;
height: 600px;
}
#overlay-img img {
border: 2px solid white;
display: block;
margin: auto;
}
Lastly, the HTML code:
<div id="wrap">
<h1>An Image Gallery</h1>
<ul id="gallery">
<li>
<img src="w" onclick="showHide(this);">
<div>Image 1</div>
</li>
<li>
<img src="w" onclick="showHide(this);">
<div>Image 2</div>
</li>
</ul>
<div id="clear"></div>
</div>
<div id="ImgOverlay" onclick="showHide(this);">
<div id="imgnav"> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">PREV</span>
<div id="overlay-img">
</div> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">NEXT</span>
</div>
</div>