Tutorial: semplice galleria fotografica in Jquery
Galleria fotografica in Jquery, istruzioni per l’installazione
Passo1: cosa deve contenere la root del sito?
- la cartella css (lightbox.css, screen.css e il foglio di stile della pagina che stai costruendo, nel nostro caso è style.css)
- la cartella js (jquery.smooth-scroll.min.js, jquery-1.7.2.min.js, jquery-ui-1.8.18.custom.min.js, lightbox.js)
- la cartella images (examples, bg-checker.png, bullet.gif, close.png, loading.gif, next.png, pattern_bg.jpg, prev.png)
- all’interno della cartella images va posizionata la cartella examples che conterrà le immagini da visualizzare. Ogni immagine verrà nominata image-numeroProgressivo.JPG, quindi image-1.JPG, image-2.JPG, image-3.JPG ecc…
Passo2: installazione
Creare una nuova pagina in html e inserire il codice che leggi sotto nella sezione HEAD della pagina:
[code style=”1″]
<head>
<title>PhotoGallery | Jquery</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
<script src=”js/jquery-1.7.2.min.js”></script>
<script src=”js/lightbox.js”></script>
<link href=”css/lightbox.css” rel=”stylesheet” />
</head>
[/code]
Passo3:
Inseriamo le miniature nella pagina:
[code style=”1″]
<a href=”images/examples/image-1.jpg” rel=”lightbox[roadtrip]”><img src=”images/examples/image-1.jpg” width=”100″ height=”100″ alt=”immagine 01″ /></a>
<a href=”images/examples/image-2.jpg” rel=”lightbox[roadtrip]”><img border=”0″ src=”images/examples/image-2.jpg” width=”100″ height=”100″ alt=”immagine 02″ /></a>
<a href=”images/examples/image-3.jpg” rel=”lightbox[roadtrip]”><img border=”0″ src=”images/examples/image-3.jpg” width=”100″ height=”100″ alt=”immagine 03″ /></a>
<br>
<a href=”images/examples/image-4.jpg” rel=”lightbox[roadtrip]”><img border=”0″ src=”images/examples/image-4.jpg” width=”100″ height=”100″ alt=”immagine 04″ /></a>
<a href=”images/examples/image-5.jpg” rel=”lightbox[roadtrip]”><img border=”0″ src=”images/examples/image-5.jpg” width=”100″ height=”100″ alt=”immagine 05″ /></a>
<a href=”images/examples/image-6.jpg” rel=”lightbox[roadtrip]”><img border=”0″ src=”images/examples/image-6.jpg” width=”100″ height=”100″ alt=”immagine 06″ /></a>
[/code]
- L’attributo rel è obbligatorio al fine di attivare l’effetto della galleria.
- L’attributo href, ovviamente, deve contenere il percorso per l’immagine ingrandita.
- LightBox aggiunge la possibilità di raggruppare più collegamenti di immagini.
Questo è tutto!
Una risposta.
Scusa, forse sono io che non l’ho trovato, ma hai anche caricato un tutorial per i form in php? Grazie. Luca