Found a guide here to make a picture enlarge by click but it´s not quite working. When I click to enlarge the image the small ones stay in front.
I put this in my html:
<div class="bild1"><script type="text/javascript" src="funktions.js"></script>
<img src="bilder/3D.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/3D_stor.png');">
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;">
</div>
</div>
<div class="bild2">
<img src="bilder/TopGame.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/TopGame_stor.png');">
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;">
</div>
</div>
<div class="bild3">
<img src="bilder/almanacka.png" alt="Almanacka-projekt" style="cursor:pointer" onclick="showImage('bilder/Almanacka_stor.png');">
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;">
</div>
</div>
css:
#largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0;
width:100%;
height:100%;
background-color: rgba(100,100,100, 0.5);}
javascript:
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';}
Am I supposed to do it differently when I have multiple pictures?
It looks great, you load pictures as demand! Maybe if you already used jQuery, you should add dynamic with fade in for instance http://api.jquery.com/category/effects/