FILOWEB.IT

 
HOME Gallery Quadernino Roberto Contatti
 

CREARE UN LIGHTBOX RESPONSITIVE PERSONALIZZATO

Per vedere lo script in azione premi qua

L'effetto Lightbox è quella finestra in overlay che compare nella pagina con effetto opacizzato o meno.
Malgrado esistono diverse librerie pronte all’uso noi vogliamo oggi crearne una noi per capire come funziona.
Il principio è molto semplice: si crea un box con z-index sopra tutti gli altri, larghezza e altezza pari al 100% della pagina, posizione assoluta e non visibile quando inizializzo la pagina.
Chiameremo questo box #fondo
 
#fondo {
                position:absolute;
                background-color:#000;
                width:100%;
                height:100%;
                min-height:100%;
                position:fixed;
                z-index:999;
                display:none;
                text-align:center;
                display:none;
                left:0;
                top:0;   
}
 
All’interno di questo posizioneremo la nostra immagine che si adatterà alla pagina.
 
.imagevedi {
                width:auto;
                max-width:80%;
                height:auto;

                max-height:90%;

                display:inline-block;

                margin-top:10px;

                border:#FFF 2px solid;

                border-bottom:#FFF 10xp solid;             

}

 Creiamo poi la nostra miniatura di immagine che verrà richiamata dallo script

.fotobox {

                width:auto;

                max-width:180px;

                height:130px;

                border:#FFF 1px solid;

                margin-top:3px;

                cursor:pointer;

}

 Tutto il resto che vedrete nel CSS della pagina completa è abbellimento

 

Vediamo ora i nostri script che saranno due:

Il primo per rendere visibile il livello nascosto e inserire all’interno del tag <img> come src il percorso della nostra foto e trasferire anche tutti gli altri dati (titolo della foto e commento)

Il secondo script invece serve per chiudere il lightbox quando premo sullo sfondo

<script type="text/javascript">

                                                                function alterna (imma,titolo,commento) {

                                                                              $(".imagevedi").attr("src","loading.gif")

                                                                              $(".imagevedi").attr("src",imma);

                                                                              $("#fondo").fadeIn(1000);

                                                                              $(".commentofoto").text(titolo);

                                                                              $(".commentofoto2").text(commento);            

                                                                }

</script>

 <script>

$(document).ready(function(){

                                                                $("#fondo").click(function(){

                                                                              $("#fondo").fadeOut(1000);

                                                                              $(".imagevedi").attr("src","loading.gif");

                                                                });

});

</script>

 

Per finire creiamo l'azione sulle nostre immagini

 <img src="indovina/2.png" class="fotobox" onclick="alterna('indovina/2.png','Pagliaccio','Un pagliaccio a Verona')" />

 

Come si vede quando richiamo la funzione alterna invio, oltre che l’indirizzo dell’immagine anche il titolo ed il commento da scrivere nel lightbox

 

 

--------
Script completo
--------

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<style type="text/css">
 
#fondo {
                                                                position:absolute;
                                                                background-color:#000;
                                                                width:100%;
                                                                height:100%;
                                                                min-height:100%;
                                                                position:fixed;
                                                                z-index:999;
                                                                display:none;
                                                                text-align:center;
                                                                display:none;
                                                                left:0;
                                                                top:0; 
}
 
.imagevedi {
                                                                width:auto;
                                                                max-width:80%;
                                                                height:auto;
                                                                max-height:90%;
                                                                display:inline-block;
                                                                margin-top:10px;
                                                                border:#FFF 2px solid;
                                                                border-bottom:#FFF 10xp solid;
                                                               
}
 
.image{
                                                                width:300px;
                                                                height:auto;
                                                                display:inline-block;
}
 
.commentofoto {
                                                                font-size:16px;
                                                                color:#FFF;
}
.commentofoto2 {
                                                                font-size:14px;
                                                                color:#FFF;
}
#boxfotoa {
                                                                width:200px;
                                                                height:160px;
                                                                border:#CCC 1px solid;
                                                                background-color:#EFEFEF;
                                                                display:inline-block;
                                                                margin:5px 5px 5px 5px;
                                                                overflow:hidden;
}
.fotobox {
                                                                width:auto;
                                                                max-width:180px;
                                                                height:130px;
                                                                border:#FFF 1px solid;
                                                                margin-top:3px;
                                                                cursor:pointer;
}
 
body {
                                                                margin-left: 5px;
                                                                margin-top: 2px;
                                                                margin-right: 5px;
                                                                margin-bottom: 2px;
                                                                text-align:center;
}
</style>
 
<script type="text/javascript">
                                                                function alterna (imma,titolo,commento) {
                                                                              $(".imagevedi").attr("src","loading.gif");
                                                                              $(".imagevedi").attr("src",imma);
                                                                              $("#fondo").fadeIn(1000);
                                                                              $(".commentofoto").text(titolo);
                                                                              $(".commentofoto2").text(commento);            
                                                                }
</script>
 
<script>
$(document).ready(function(){
                                                                $("#fondo").click(function(){
                                                                              $("#fondo").fadeOut(1000);
                                                                              $(".imagevedi").attr("src","loading.gif");
                                                                });
});
</script>
 
 
</head>
 
<body>
 
<!--  light -->
<div id="fondo">
                                                               
  <img src="loading.gif" class="imagevedi" /><br/>
  <span class="commentofoto">  </span><br/>
  <span class="commentofoto2">  </span>
</div>
<!-- fine light -->
 
                                                                <div id="boxfotoa">
                                                                <img src="indovina/2.png" class="fotobox" onclick="alterna('indovina/2.png','Pagliaccio','Un pagliaccio a Verona')" />
        <br/>                                           
                                                                </div>
   
    <div id="boxfotoa">
                                                                <img src="indovina/3.png" class="fotobox" onclick="alterna('indovina/3.png','Cigno','Il cigno Filippo a Borghetto sul Mincio')" />
        <br/>                                           
                                                                </div>
   
   
</body>
</html>

Contenuti

* Sezione indipendente con grafica non aggiornata
G+ FB TW whatsapp

LISTA TUTORIALS

CREARE UN LIGHTBOX RESPONSITIVE PERSONALIZZATO
ANIMAZIONI CON JQUERY
CREARE UN SISTEMA SOLARE CON 3 PIANETI

 

 

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.