Lightbox permette agli sviluppatori Web di visualizzare più immagini in una singola pagina HTML. Cliccando su un link alterati mostrerà ogni immagine assegnata in una finestra pop-up interna. L'effetto è realizzato utilizzando il codice JavaScript.

Istruzioni

1

Caricare immagini sul server Web. Ai fini della visualizzazione, provate a fare ogni immagine la stessa dimensione in pixel. Prendere nota del percorso URL di ogni file.

2

Creare una directory "lightbox" nella directory principale del server Web. Si potrà memorizzare tutti gli elementi di Lightbox in questa directory.

3

Scaricare lo script Lightbox. Decomprimere il file.

4

Caricare immagini, css e js cartelle nella directory di "lightbox" sul server Web.

5

Aprire il file HTML che si desidera aggiungere il Lightbox. Aggiungere le seguenti quattro righe di codice tra la testa di < >< / testa > Tag:

< script tipo = "text/javascript" href = "l'http://www.yoururl.com/lightbox/css/lightbox.css" type = "text/css" media = "schermo" / >

Sostituire "il yoururl.com" con l'URL principale del sito Web.

6

Aggiungere il codice Lightbox JavaScript al tuo codice HTML. Inserire il seguente codice tra < corpo >< / corpo > Tag: < a href = "l'http://www.yoururl.com/images/image-1.jpg" rel = "lightbox" titolo = "mia didascalia" > immagine #1 < /a >

Sostituire "l'http://www.yoururl.com/images/image-1.jpg" con il percorso URL di una delle immagini che hai caricato nel passaggio 1. Modificare "mia didascalia" qualsiasi didascalia vuoi assegnato a quell'immagine. Modificare il codice di "immagine #1" a qualsiasi testo o immagine.

7

Salvare il documento HTML. Caricare sul server Web. Anteprima della pagina per accertarsi che lo script Lightbox stia funzionando correttamente.

Consigli & Avvertenze

• Se le immagini non vengono visualizzate, controllare i file "lightbox.css" e "Lightbox" e assicurarsi che i percorsi dei file immagine siano corrette.