I have a series of images which are enlarged in a popup.div over a blanket.div.I have also added a back/forward button to the popup.div to move from one enlarged image to the next/previous.
The buttons and images do what I want but the blanket.div only appear with the first image clicked, thereafter nothing.
As far as I can see I am using the largeOpen(ID) function in all cases, is this the problem ?
My code is:
<script>
function largeOpen(ID) {
document.getElementById('blanket').style.display="block";
document.getElementById('popupDiv_' + ID).style.display="block";
}
function largeClose(ID) {
document.getElementById('popupDiv_' + ID).style.display = "none";
document.getElementById('blanket').style.display="none";
}
</script>
<style>
#blanket{
background-color:#111;
opacity:0.65;
filter:alpha(opacity=65);
position:fixed;
z-index:8;
top:0;
left:0;
right:0;
bottom:0; //necessary to have top,left,bottom,right to get blanket
width:100%;
}
.small{
background-color:#ffffff;
width:23%;
height:200px;
text-align:center;
float:left;
padding:15px 50px 15px 50px;
}
.large{
width:680px;
height:510px;
top:45%;
left:50%;
margin:-255px 0 0 -340px; // height/2 width/2
display:none;
font-size:16px;
color:#000000;
position:fixed;
text-align:center;
z-index:9002;
}
</style>
<body>
<div id="blanket" style="display:none;" ></div>
<div id="small_1" class="small" onclick="largeOpen('1');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_1" class="large" style="display:none;" onclick="largeClose('1');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"/>Driade arriving Naples<button value="forward" onclick="largeOpen('2');">Forward</button></div>
<div id="small_2" class="small" onclick="largeOpen('2');"><img src="MasterImage/Arcadia.jpg" width="212px" height="160px"></div>
<div id="popupDiv_2" class="large" style="display:none;" onclick="largeClose('2');"><img src="MasterImage/Arcadia.jpg" width="660px" height="490px"><button value="back" onclick="largeOpen('1');">Back</button>Arcadia at Malaga<button onclick="largeOpen('3')">Forward</button></div>
<div id="small_3" class="small" onclick="largeOpen('3');"><img src="MasterImage/Aida Blu.jpg" width="212px" height="160px"></div>
<div id="popupDiv_3" class="large" style="display:none;" onclick="largeClose('3');"><img src="MasterImage/Aida Blu.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('2');">Aida Blu at Naples</td><td><input type="button" value="forward" onclick="largeOpen('4');"/></div>
<div id="small_4" class="small" onclick="largeOpen('4');"><img src="MasterImage/Coral.jpg" width="212px" height="160px"></div>
<div id="popupDiv_4" class="large" style="display:none;" onclick="largeClose('4');"><img src="MasterImage/Coral.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('3');">Coral in Tyrrhenian Sea<input type="button" value="forward" onclick="largeOpen('5');"/></div>
</body>
** Can someone help,please ?**