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>
Member Avatar for LastMitch

Can someone explain what is making all images appear on opening the page ?

@furlanut

The answer is pretty simply you put 12 ids.

Thank you,but I thought that onclick would open one image at a time when I clicked the image not all 12 when I opened the page.

Member Avatar for LastMitch

Thank you,but I thought that onclick would open one image at a time when I clicked the image not all 12 when I opened the page.

@furlanut

I did ask you are you familiar with javascript, so mention no.

The function is written for 1 id, you need modify the code a little to do that.

Take a look at this code:

http://blogs.msdn.com/b/ukmsdn/archive/2011/01/12/msdn-flash-feature-article-unobtrusive-javascript-with-jquery-html-5-style.aspx

Used the code from there and apply to your code. Then it will work.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.