Immagini in Overlay

/* Immagini in Overlay è uno script d'ingrandimento
creato da JackGaunt - vietato rimuovere i credits*/

.overlaying {position:fixed; background:rgba(0, 0, 0, 0.8); width: 0%; height: 0%; opacity: 0; z-index: 1; top: 0%; left: 50%; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; z-index: -1 !important}

.overlayvis {opacity: 1; padding-top: 10%; width: 100%; height: 80%; top: -0%; left: -0%; position: fixed; z-index: 9 !important; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);  -moz-transition: all 0.5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s}
.overlayvis:before {content:'Pictures Overlay was coded by ©JackGaunt'; position:absolute; font-size: 7pt; bottom: 0; right: 0; color: rgba(255, 255, 255, 0.2)}

.descript {position: static; display: inline-table; line-height: 30px; color: #222; direction: rtl; font-weight: bold; padding: 10px; background: #F9F9F9; border: 1px solid #999; box-shadow: 0 0 30px #000}

.thumb {position:relative; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; opacity:.75}

.thumb:hover {opacity: 1}

.closure {display: inline; float: right; width: 0; overflow: visible; margin-top: -30px;  margin-right: -30px}

.closure a img {position:absolute; -moz-transition: all 0.5s ease-in-out 0s; transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -ms-transition: all .5s ease-in-out 0s; -webkit-transition: all .5s ease-in-out 0s; -moz-transform: scale(.75); -o-transform: scale(.75); -ms-transform: scale(.75); -webkit-transform: scale(.75); transform: scale(.75)}

.closure a img:hover {-moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1)}
/* FINE IMMAGINI IN OVERLAY */

<!--- SCRIPT PER LE IMMAGINI IN OVERLAY - ©JackGaunt --->
<script type="text/javascript">
function display(i) {
document.getElementById('overy'+i).className = "overlayvis" ;

target=document.getElementById('fancy'+i);
target.style.maxHeight=(screen.height*(0.6))+'px';
}
function closure(i) {
document.getElementById('overy'+i).className = "overlaying" ;
}
</script>

<div id="overy1" class="overlaying" onkeypress="return identifyEscKeyPressedEvent(event);">
<div class="descript"><div class="closure"><a href="#" onclick="closure(1)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 1 (non toccare il codice che precede) -->
<img id="fancy1" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 1 (non troppo lunga)-->
immagine quadrata
</div>
</div>

<div id="overy2" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(2)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 2 (non toccare il codice che precede) -->
<img id="fancy2" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 2 (non troppo lunga)-->
immagine lunga
</div>
</div>

<div id="overy3" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(3)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 3 (non toccare il codice che precede) -->
<img id="fancy3" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 3 (non troppo lunga)-->
immagine larga
</div></a>
</div>

<div id="overy4" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(4)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 4 (non toccare il codice che precede)-->
<img id="fancy4" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 4 (non troppo lunga)-->
immagine quadrata
</div>
</div>

<div id="overy5" class="overlaying">
<div class="descript"><div class="closure"><a href="#" onclick="closure(5)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 5 (non toccare il codice che precede)-->
<img id="fancy5" src="http://linkimmagine.png"> <br>
<!-- DESCRIZIONE 5 (non troppo lunga)-->
immagine quadrata</div>
</div>

<!-- PER AGGIUNGERE ALTRE IMMAGINI COPIARE E INCOLLARE DA QUI RIMUOVENDO i caratteri "<!--" iniziali per ogni riga -->
<!-- <div id="overyNUMEROIMMAGINE" class="overlaying">
<!-- <div class="descript"><div class="closure"><a href="#" onclick="closure(NUMEROIMMAGINE)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE NUMEROIMMAGINE (non toccare il codice che precede)-->
<!-- <img id="fancyNUMEROIMMAGINE" src=""> <br>
<!-- DESCRIZIONE NUMEROIMMAGINE (non troppo lunga)-->
<!-- immagine quadrata</div>
</div>
<!-- RICORDANDOVI DI MODIFICARE NUMEROIMMAGINE CON IL NUMERO DELL'IMMAGINE CHE STATE AGGIUNGENDO, ad esempio:
<!-- <div id="overy6" class="overlaying">
<!-- <div class="descript"><div class="closure"><a href="#" onclick="closure(6)"><img src="http://i.imgur.com/jdMlR.png"></a></div>
<!-- IMMAGINE 6 (non toccare il codice che precede)-->
<!-- <img id="fancy6" src=""> <br>
<!-- DESCRIZIONE 6 (non troppo lunga)-->
<!-- immagine quadrata</div>

<!--- FINE SCRIPT PER LE IMMAGINI IN OVERLAY --->

<a href="#" class="thumb" onclick="display(1)">
<img src="http://linkimmagine.png"> </a>

<a href="#" class="thumb" onclick="display(2)">
<img src="http://linkimmagine.png"> </a>

<a href="#" class="thumb" onclick="display(3)">
<img src="http://linkimmagine.png"> </a>

<a href="#" class="thumb" onclick="display(4)">
<img src="http://linkimmagine.png"> </a>

<a href="#" class="thumb" onclick="display(5)">
<img src="http://linkimmagine.png"> </a>

<!-- SE NE INSERITE ULTERIORI, COPIATE E INCOLLATE
<a href="#" class="thumb" onclick="display(NUMEROIMMAGINE)">
<img src="http://linkimmagine.png"> </a>
sostituendo a NUMEROIMMAGINE il numero effettivo, tipo
<a href="#" class="thumb" onclick="display(6)">
<img src="http://linkimmagine.png"> </a>
FINE -->