Ciao, sto realizzando il mio sito web ed ho bisogno di un aiuto.
Ho creato una galleria di immagini che si dovrebbero aprire più grandi in overlay.
Sono riuscita a farla funzionare ma il problema è che ho più immagini da aprire... vediamo se in codice mi spiego meglio.

HTML

[img]img/img01.jpg[/img]
<div class="overlay" id="overlay" style="display:none;"></div>

<div id="box">
<div class="contenuto_box">
[img]img/portfolio_big/piaggio.jpg[/img]


testo</p>
</div>
<p class="chiudi">X</p>
</div>


JS

$(document).ready(function() {

$(".apri").click(
function(){
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});

$(".chiudi").click(
function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});

//chiusura emergenza
$("#overlay").click(
function(){
$(this).fadeOut('fast');
$('#box').hide();
});

});

Mi chiedevo quindi se esiste un modo per far si che possa creare dei box1,2,3,4,5... senza dover copia/incollare per ogni overlay lo script, quindi se si può implementare una variabile.

Grazie mille