Come allegare foto a shadowbox

January 16

Shadowbox JS è un JavaScript che mette le immagini in una scatola nera sopra la parte superiore di una pagina Web. Anche se simile a molti script lightbox cosiddetti disponibili, Shadowbox JS è compatibile con i video e le immagini. Questo script è anche compatibile con ID JS, quindi se avete bisogno di passare a Shadowbox per sostenere i video o semplicemente usare il suo stile più scuro, è possibile farlo senza modificare gli attributi rel nei link alle foto. Inoltre, Shadowbox JS non richiede una libreria JavaScript come jQuery o Prototype a lavorare. È possibile aggiungere alle pagine Web come JavaScript dritto.

istruzione

1 Aprire la pagina Web in Blocco note o un editor di codice e aggiungere questo codice al di sopra della </ head> tag di chiusura:

<Link rel = "stylesheet" href = "path / to / shadowbox.css" type = "text / css">
<Script src type = "path / to / shadowbox.js" = "text / javascript"> </ script>

2 Aggiungere questo codice JavaScript tra una coppia di tag <script> nel codice HTML:

Shadowbox.init ();

Assicurarsi che i tag <SCRIPT> si mette questo codice all'interno non contengono un attributo src. Se è necessario aggiungere una nuova coppia, li scrivere come "<script> </ script>" e metterli sotto ogni altro tag <script>.

3 Scorrere verso il basso nel codice corpo della pagina Web e trovare tutti i link alle immagini che si desidera attaccati a Shadowbox. Aggiungere l'attributo rel con valore "shadowbox":

<a href="path/to/image.jpg" rel="shadowbox"> collegamento immagine </a>

Questo funziona anche sui link quando il tag <a> è avvolto intorno a un tag <img>, come ad esempio con i link di anteprima.

4 Aggiungere qualsiasi testo della didascalia che si desidera utilizzare l'attributo title all'interno del tag <a>:

<a href="path/to/image.jpg" rel="shadowbox" title="This è il mio image!"> collegamento immagine </a>

5 Collegare più immagini allo stesso Shadowbox utilizzando un nome gruppo:

<a href="path/to/image1.jpg" rel="shadowbox[group_name]"> Immagine collegamento 1 </a>
<a href="path/to/image2.jpg" rel="shadowbox[group_name]"> Immagine Link 2 </a>

Come in questo esempio, il nome del gruppo deve andare parentesi all'interno. Dare un nome al gruppo di tua scelta, ma assicurarsi che si digita fuori lo stesso in ogni collegamento se si desidera collegare tutte le immagini insieme.

Consigli e avvertenze

  • Se il vostro sito utilizzato Lightbox JS prima, non è necessario cambiare il contenuto delle attributi rel. Shadowbox ospita precedenti utenti Lightbox JS consentendo "lightbox" invece di "shadowbox" nel codice di collegamento.
  • Quando si utilizza WordPress, è possibile installare il Shadowbox JS plug-in, se si desidera utilizzarlo senza modificare alcun codice della pagina Web.