Come creare un effetto lightbox

Nessun Commento

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

Web Specialist e Business Developer Laureato nel 2003 al primo corso di Laurea sull’Information Technology in Italia, seguo, vivo e lavoro con passione nei campi del web marketing, web design e web development. Metto le mie conoscenze e le mie capacità al servizio di aziende italiane e straniere cercando di sviluppare non solo l’apparato tecnologico ma anche la rete commerciale e di marketing per aiutarle a vendere di più e con più semplicità. Nel corso della mia carriera lavorativa ho lavorato in importanti realtà come Microsoft Irlanda, Tim, Alfio Bardolla Training Company in qualità di designer o sviluppatore web e marketer. Sono anche il fondatore di Ecletticamente, un network di autori e coach in ambito crescita personale, seduzione, miglioramento, relazioni.. che ha come obiettivo la promozione dei suoi autori e la fornitura di contenuti di qualità per i suoi utenti.