When the page opens all 12 popupDiv (large) images are centered in a stack. Why ?
Having closed them all, the page then behaves the way I want i.e. onclick the popupDiv appears and one can go to the next or preceding large image.
Can someone explain what is making all images appear on opening the page ?
I have not much experience of javascript, could someone also explain how I can add a blanket to fill the screen below the popup.
<script>
function largeOpen(largeID) {
document.getElementById('popupDiv_' + largeID).style.display = "block";
}
function largeClose(largeID) {
document.getElementById('popupDiv_' + largeID).style.display = "none";
}
</script>
<style>
.small{
background-color:#ffffff;
border:10px solid grey;
width:23%;
height:200px;
text-align:center;
float:left;
padding:15px 50px 15px 50px;
overflow: auto;
}
.large{
background-color:#ffffff;
border:10px double #3f7cef;
padding:2px 5px 25px 5px;
width:680px;
height:510px;
top:45%;
left:50%;
margin:-255px 0 0 -340px; // height/2 width/2
display:none;
position:fixed;
text-align:center;
}
</style>
<body>
<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" onclick="largeClose('1');"><img src="MasterImage/Driade.jpg" width="660px" height="490px">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('2');"/></div>
<div id="small_2" class="small" onclick="largeOpen('2');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_2" class="large" onclick="largeClose('2');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('1');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('3');"/></div>
<div id="small_3" class="small" onclick="largeOpen('3');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_3" class="large" onclick="largeClose('3');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('2');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('4');"/></div>
<div id="small_4" class="small" onclick="largeOpen('4');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_4" class="large" onclick="largeClose('4');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('3');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('5');"/></div>
<div id="small_5" class="small" onclick="largeOpen('5');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_5" class="large" onclick="largeClose('5');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('4');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('6');"/></div>
<div id="small_6" class="small" onclick="largeOpen('6');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_6" class="large" onclick="largeClose('6');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('5');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('7');"/></div>
<div id="small_7" class="small" onclick="largeOpen('7');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_7" class="large" onclick="largeClose('7');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('6');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('8');"/></div>
<div id="small_8" class="small" onclick="largeOpen('8');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_8" class="large" onclick="largeClose('8');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('7');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('9');"/></div>
<div id="small_9" class="small" onclick="largeOpen('9');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_9" class="large" onclick="largeClose('9');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('8');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('10');"/></div>
<div id="small_10" class="small" onclick="largeOpen('10');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_10" class="large" onclick="largeClose('10');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('9');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('11');"/></div>
<div id="small_11" class="small" onclick="largeOpen('11');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_11" class="large" onclick="largeClose('11');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('10');">Driade arriving Naples<input type="button" value="forward" onclick="largeOpen('12');"/></div>
<div id="small_12" class="small" onclick="largeOpen('12');"><img src="MasterImage/Driade.jpg" width="212px" height="160px"></div>
<div id="popupDiv_12" class="large" onclick="largeClose('12');"><img src="MasterImage/Driade.jpg" width="660px" height="490px"><input type="button" value="back" onclick="largeOpen('11');">Driade arriving Naples<div>
</body>