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…

Alla fine dell’articolo troverai i materiali che ti servono con una galleria pronta.

Passo2: installazione

Creare una nuova pagina in html e inserire il codice che leggi sotto nella sezione HEAD della pagina:


<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>

Passo3:

Inseriamo le miniature nella pagina:


<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>
  • 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!

Tagged under:

1 comment

Lascia un commento

Log In or Register