Lightbox utilizza il prototipo Framework e libreria di effetti Scriptaculous per produrre un "lightbox"-come effetto per le immagini e gallerie di immagini su siti Web. Questo effetto è sovrapposta la pagina che stai visualizzando. Creato da Lokesh Dhakar, Lightbox è nella sua seconda versione, a partire da maggio 2011. Lightbox 2 consente più semplice raggruppamento di immagini per gallerie e ha migliorato le transizioni immagine. L'impostazione Lightbox richiede poco più di alcuni file JavaScript e qualche semplice modifica HTML.

Istruzioni

1

Scaricare i file di Lightbox dal sito Lightbox 2 e salvarle sul desktop.

2

Fare doppio clic il file compresso scaricato. Fare clic su "Estrai tutti i file" per avviare l'estrazione guidata.

3

Fare clic su "Avanti". Selezionare una posizione sul computer per estrarre i file Lightbox. Fare clic su "Avanti".

4

La casella "Visualizza i file estratti". Fare clic su "Fine".

5

Caricare il "css", "js" e "immagini" le cartelle nella directory principale del tuo sito Web.

6

Caricare l'immagine o le immagini che si desidera utilizzare con Lightbox nella cartella "immagini" che già caricato.

7

Scarica una pagina HTML che si desidera utilizzare Lightbox su utilizzando il software client FTP.

8

Aggiungere il seguente codice all'interno del "< head >" e "< / head >" Tag:

< script type = "text/javascript" href="css/lightbox.css" tipo = "text/css" media = "schermo" / >

9

Aggiungere il codice seguente alla tua immagine appena prima il tag "< immagine >" nella tua pagina HTML:

< un href="images/YourImage.jpg" rel = "lightbox" title = "Caption" A">

Se si utilizza più immagini, aggiungere un nome di gruppo alla voce "rel" come segue:

< un href="images//YourImage.jpg" rel = "lightbox [roadtrip]" >< immagine tag >< /a >

< un href="images//YourImage.jpg" rel = "lightbox [roadtrip]" > immagine #2 < /a >

< un href="images//YourImage.jpg" rel = "lightbox [roadtrip]" > immagine #3 < /a >

10

Aggiungere il tag di chiusura "< /a >" immediatamente dopo il codice della immagine.

11

Salvare la pagina HTML e caricarlo sul tuo sito Web file. Lightbox è ora stata implementata su quella pagina. Ripetere i passaggi da 7 a 10 per qualsiasi altre pagine HTML che hanno bisogno di Lightbox aggiunto.

Consigli & Avvertenze

• Se si utilizza immagini multiple è necessario solo un'immagine che Mostra sulla pagina. Le immagini successive possono essere collegamenti solo senza tag "< immagine >" o testo.
• Se hai già le cartelle nella directory principale con gli stessi titoli come le cartelle di Lightbox, caricare i file da ogni cartella Lightbox nelle cartelle corrette nei file del sito Web.