Tutorial: semplice galleria fotografica in Jquery

Super MarkeTHINK: tutto ciò che serve per far crescere il tuo business

Created with Sketch.

Tutorial: semplice galleria fotografica in Jquery

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.

  1. Luca ha detto:

    Scusa, forse sono io che non l’ho trovato, ma hai anche caricato un tutorial per i form in php? Grazie. Luca

Lascia un commento