Realizziamo una photogallery minimale con l'effetto lightbox (colorbox)

Materiale

4 fotografie medie (es 640px x 480 px) e 4 miniature (thumbnails)



JS Lightbox
http://leandrovieira.com/projects/jquery/lightbox/

Colorbox

http://colorpowered.com/colorbox/

esempio di html

<!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" />
<title>Documento senza titolo</title>
<style type="text/css">
body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #FFF;
    background-color: #000;
}
h1 {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #CCC;
}
#miniature {
    height: 500px;
    width: 440px;
    margin-right: auto;
    margin-left: auto;
}
#miniature .min {
    float: left;
    padding: 35px;
    width: 135px;
    text-align: center;
}
#miniature .min a img {
    border: 1px solid #333;
    box-shadow:2px 2px 16px #555;
}
</style>
 
<link href="colorbox.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
 
<script>
        $(document).ready(function(){
            //esempio di come chiamare la funzione colorbox
            // nella riga che segue applichiamo la funzione colorbox ai link (tag a) con l'attributo rel="colorbox"
            $("a[rel='colorbox']").colorbox();
            // invece nella riga seguente applichiamo l'effetto "fade" ai link (tag a) con classe cbox
            $("a.cbox").colorbox({transition:"fade"});
            });
 
    </script>
 
 
 
</head>
 
<body>
<h1>Photogallery</h1>
<div id="miniature">
<p class="min"><a rel="colorbox" href="photogallery/01.jpg"><img src="photogallery/t01.jpg" width="120" height="120" alt="foto 1" /></a>
    foto 1</p>
<p class="min"><a rel="colorbox" href="photogallery/02.jpg"><img src="photogallery/t02.jpg" width="120" height="120" alt="foto 2" /></a>
    foto 2</p>
<p class="min"><a rel="colorbox" href="photogallery/03.jpg"><img src="photogallery/t03.jpg" width="120" height="120" alt="foto 3" /></a>
    foto 3</p>
<p class="min"><a rel="colorbox" href="photogallery/04.jpg"><img src="photogallery/t04.jpg" width="120" height="120" alt="foto 4" /></a>
    foto4</p>
</div>
<p> ---- web design and animation 2011 ---- </p>
</body>
</html>
 




esempio di css



files da includere

nella cartella photogallery

fotografie e thumbnails

nella cartella js
jquery.colorbox.js
nella cartella radice (insieme al file photogallery.html)
colorbox.css
nella cartella "images" il contenuto delle immagini degli esempi scaricati
border.png
controls.png
loading.gif
loading_background.png
ovarlay.png
 
cartella IE6
 

<div id="miniature">
<p class="min"><a rel="colorbox" href="photogallery/01.jpg"><img src="photogallery/t01.jpg" width="120" height="120" alt="foto 1" /></a>
foto 1</p>
<p class="min"><a rel="colorbox" href="photogallery/02.jpg"><img src="photogallery/t02.jpg" width="120" height="120" alt="foto 2" /></a>
foto 2</p>
<p class="min"><a rel="colorbox" href="photogallery/03.jpg"><img src="photogallery/t03.jpg" width="120" height="120" alt="foto 3" /></a>
foto 3</p>
<p class="min"><a rel="colorbox" href="photogallery/04.jpg"><img src="photogallery/t04.jpg" width="120" height="120" alt="foto 4" /></a>
foto4</p>

</div>