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>
