Come creare un effetto Lightbox

June 16

Come creare un effetto Lightbox


Un lightbox viene utilizzato per visualizzare le immagini sul vostro sito web in una finestra pop-up overlay invece di reindirizzare a una nuova pagina. ID utilizza Javascript e XHTML per creare il suo effetto, e usa un foglio di stile CSS collegato a definire i parametri come altezza e larghezza. Raccolte sono utili per le gallerie del sito web, o per qualsiasi sito web che vuole mettere le immagini in mostra in un modo pulito e ordinato.

istruzione

1 Scaricare lo script ID dal sito ID. Avrete bisogno di questo più avanti.

2 Aprire il file HTML in cui si desidera inserire la ID. Nella sezione di intestazione, sotto "<head>" inserire i link JavaScript come segue:

<Script type = "text / javascript" href = "css / lightbox.css" type = "text / css" media = "screen" />

4 Aperto lightbox.css, che è incluso nel file scaricato e guardare oltre le caratteristiche del vostro Lightbox. Questo avrà il colore del bordo ID, la dimensione della ID e altre caratteristiche del tuo ID elencato fuori.

5 Impostare le immagini in modo che usano lightbox invece di reindirizzamento. Per fare ciò, inserire il codice corretto ogni volta che si dispone di un'immagine nel corpo del codice HTML.

<a href="images/image-1.jpg" rel="lightbox" title="my caption"> immagine # 1 </a>

Sostituire "images / image-1.jp" con il percorso del file di immagine. Sostituire "la mia voce" con qualsiasi didascalia si desidera che il ID da visualizzare. Eliminare questa opzione se non si desidera una didascalia. Sostituire "immagine # 1" con il testo che si desidera essere elencati per collegare direttamente le immagini.

6 Carica il tuo file HTML e tutti i file scaricati al tuo sito web. Ora sarà in grado di vedere l'effetto Lightbox sulla tua pagina web.

Consigli e avvertenze

  • Prova la tua pagina web su diversi browser per assicurarsi che sia universalmente funzionale.