Installazione Jquery lightbox plugin - EINAUDI

Installazione Jquery lightbox plugin



Scaricate il plugin dal sito della scuola
Cliccate sul file zippato si aprirà automaticamente Zip Genius
Estraete il file zippato utilizzando ZIP Genius:






Estrai -> Estrai tutti i file in -> Cartella Personalizzata
Selezionare ora la cartella in cui si trova il vostro sito
Cliccare sul pulsante OK
Adesso nel vostro sito sarà presente la cartella: “Jquery lightbox plugin”
Aprite ora la cartella “Jquery lightbox plugin”
Copiate nella cartella principale del vostro sito le seguenti cartelle:


Cancellate ora la cartella: “Jquery lightbox plugin”
Svuotate ora la cartella “photos” e memorizzate le vostre foto: di ogni foto occorre anche la
miniatura, quindi con paint aprite ogni vostra voto ridimensionatela e salvatela con un nuovo nome
(si consiglia di usare una risoluzione di 72 * 72 pixel)
Installazione Jquary lightbox plugin (ultima revisione 06/03/2013)
Pag. 1
Nella vostra pagina HTML nella sezione HEAD inserite le seguenti istruzioni necessarie per effettuare i
collegamenti alle librerie Java ed ai css utilizzati:
<link rel=”stylesheet” type="text/css" href="../style-projects-jquery.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
position:absolute;
width: larghezza in pixel;
height: altezza in pixel;
top: distanza in pixel dal bordo superiore;
left: distanza in pixel dal borso destro;
border: 1px solid gray;
background-color: #444;
padding: 10px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
A questo punto occorre inserire nel codice HTML nella sezione “content” il DIV gallery inserendo al suo
interno i seguenti collegamenti ipertestuali alle immagini della galleria fotografica:
<div id="gallery">
<a href="photos/image1.jpg" title="titolo"><img src="photos/miniatura_image1.jpg" width="72" height="72" alt="" /></a>
<a href="photos/image2.jpg" title="titolo"><img src="photos/miniatura_image2.jpg" width="72" height="72" alt="" /></a>
</div>
Installazione Jquary lightbox plugin (ultima revisione 06/03/2013)
Pag. 2