Scrivo questo post per rispondere a una richiesta proveniente dal sito Tuttoconilpc su blogspot.com.
L’obiettivo è quello di creare un effetto lightbox (ovvero una maschera trasparente) che agisce all’evento onclick() di un pulsante, immagine o quant’altro.
Per facilitarci la vita usiamo jquery.
Ci serve:
- la libreria jquery
- Il lightbox, ovvero un contenitore del nostro oggetto che vogliamo far apparire
- Un eventlistener, ovvero un gestore che scatena la mia funzione a un determinato evento
- uno stile per il nostro lightbox
Procediamo..
1 creiamo il lightbox, ovvero il contenitore
All’interno del nostro body, e più precisamente prima del tag di chiusura </body>, creiamo un div contente ciò che vogliamo far apparire.
Ecco il mio:
<div id="lightbox-panel">
<!–Metto qui il mio contenuto che mi interessa mostrare a sorpresa –>
</div><!– /lightbox-panel –>
<div id=”lightbox”> </div><!– /lightbox –>
2 Associo uno stile al lightbox
All’interno dei tag <head> del mio documento html creo uno stile per il mio lightbox.
<style>
#lightbox-panel{
display:none;// l'oggetto non è visibile
background:#000000;
opacity:0.9;//trasparenza
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
</style>
3 Creo gli event listener
Gli eventlistener sono degli oggetti in attesa che un evento si scateni.
Con jquery è possibile dire a un oggetto che allo scatenarsi di un evento succeda qualcosa.
<script>
//quando il browser ha terminato il caricamento della pagina..
$(document).ready(function(){
//definisci un evento onclick per l’oggetto show-panel che è un link
$(“a#show-panel”).click(function(){
//al click dissolvi l’oggetto lightbox
$(“#lightbox, #lightbox-panel”).fadeIn(300);
});
//definisci un evento onclick per l’oggetto close-panel che è un link
$(“a#close-panel”).click(function(){
//al click mostra l’oggetto lightbox
$(“#lightbox, #lightbox-panel”).fadeOut(300);
});
})
</script>
4 Includo la libreria jQuery all’interno dell’head
<script language=”javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
Vuoi vedere il risultato?
