Assegnare una variabile

[penteasolare]

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

[lucavizzi]

Bisogna parametrizzare le tre funzioni.

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

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

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


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

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

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

var activeBox; //per chiudere dall'overlay 
$(document).ready(function() {

    $(".apri").click(
        function(){
             var idToOpen=$(this).className().replace('apri ','');
             activeBox=idToOpen;
            $('#overlay').fadeIn('fast');
            $('#'+idToOpen).fadeIn('slow');
        });
        
        $(".chiudi").click(
        function(){
            var idToOpen=$(this).parent().className().replace('apri ','');
        $('#overlay').fadeOut('fast');
        $('#'+idToOpen) .hide();
        });
        
        //chiusura emergenza 
        $("#overlay").click(
        function(){
        $(this).fadeOut('fast');
        $('#'+activeBox).hide();
        })
 
   });

PS: Non sarebbe meglio usare un plugin tipo http://fancyapps.com/fancybox/ ?

Ciao