Articoli

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?

Clicca qui

Ebbene sto rifacendo la grafica e il funzionamento del sito www.webenjoy.net e quindi mi sono messo alla ricerca di alcuni modelli di “under construction”.

Non so bene se mai ne userò uno, anche se sono molto attratto dal jquery countdown che avevo visto anche in un occasione precedente, mentre cercavo di sviluppare una piccola funzioncina javascript.

Continue reading “9 bellissimi esempi di pagine di “lavori in corso”” »