Come usare Lightbox JS

May 9

Come usare Lightbox JS


Lightbox JS è un JavaScript facilmente implementato che carica le immagini in un lightbox animato. Un lightbox vita reale mostra fotografie su un bianco, superficie semi-opaca che la luce può brillare attraverso, illuminando le immagini. In modo simile, un ID su un sito posiziona le immagini in una sovrapposizione di solito bianco cornice in cima alla pagina. Lightbox JS fa proprio questo; ti dà anche la possibilità di raggruppare le immagini insieme per facilitare la navigazione galleria.

istruzione

1 Aggiungere le librerie Prototype e Script.aculo.us JavaScript al codice della pagina Web, sia al di sopra della chiusura "</ head>" titolo o al di sopra della chiusura "</ body>" tag:

<Script type = "text / javascript" src = "& lt; / script" rel = "nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js&quot;>&lt;/script>
<Script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js? Carico = effetti, costruttore"> </ script>

È possibile copiare e incollare il codice di cui sopra direttamente nella tua pagina Web, in quanto fa riferimento alle librerie JavaScript ospitati da Google.

2 Carica il file "lightbox.js" nella directory principale del server Web o una delle sue sottodirectory. Includere il file nel codice della pagina Web inserendo questa linea sotto le librerie JavaScript:

<Script type = "text / javascript" src = "path / to / lightbox.js"> </ script>

Change "path / to / lightbox.js" per abbinare l'URL del file "lightbox.js".

3 Trova qualsiasi insieme di tag di ancoraggio nel codice per la pagina Web che puntano a un'immagine. Aggiungere il seguente attributo "rel" per fare il punto collegamento a un lightbox:

rel = "lightbox"

Nel codice HTML, il link ad una immagine sarà simile:

<a href="path/to/image.jpg" rel="lightbox" title="Image Caption"> <img src = "path / to / thumbnail.jpg" /> </a>

Questo codice mostra una miniatura legato all'immagine full-size, che verrà visualizzato in un lightbox. Utilizzare l'attributo "title" per impostare una didascalia per l'ID, se volete.

4 Aggiungere un nome di gruppo per l'attributo "rel" per i link, se si desidera creare una galleria lightbox:

<a href="path/to/image1.jpg" rel="lightbox[coolpics]" title="Image Caption"> Immagine 1 </a>
<a href="path/to/image2.jpg" rel="lightbox[coolpics]" title="Image Caption"> Immagine 2 </a>

Quando si immagini di gruppo insieme, un utente può caricare una immagine in una lightbox facendo clic sul link e poi usare i suoi tasti freccia della tastiera per navigare tra le altre immagini del gruppo. Le immagini raggruppate devono essere tutti sulla stessa pagina web, ma non sono tenuti a metterli tutti uno accanto all'altro.

Consigli e avvertenze

  • Se Lightbox JS non riesce a caricare nella pagina Web, controllare il tag "<body>" per un evento "onload". Se c'è uno là, aggiungere "; initLightbox ()" (senza virgolette) dentro "onload".
  • Creare una didascalia collegata scrivendo il link al suo interno l'attributo "title", ma sostituire tutte le fasce di HTML e le virgolette nei tag di ancoraggio con HTML codici entità speciale.

Articoli Correlati