Slik installerer Lightbox JS

Lightbox er en enkel Javascript applet som viser bilder i en boks som legges nettsted innhold mens forstørrelses bildet; dette holder brukeren fra å navigere til en annen side for å se en større versjon av et miniatyrbilde. Bildet vises i en enkel boks når websiden er formørket å eliminere distraksjon. Lightbox er en fin måte å vise store versjoner av bilder på blogger, profesjonelle nettsteder og e-handel portaler.

Bruksanvisning

1 Last ned Lightbox 2 pakken fra Lightbox nettsted (se "Ressurser" nedenfor).

2 Åpne ZIP-filen.

3 Flytt filer og mapper i "Lightbox" -mappen til rotkatalogen på ditt nettsted. Hvis noen mappenavn konflikt med en annen, ikke gi nytt navn til Lightbox mapper, gi nytt navn til mapper som du har opprettet.

4 Legg til følgende kode i nettsidens header:

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

Alternativt, føyer CSS header med CSS-koden i "Lightbox" mappe som heter "css".

6 Legg bilder til siden din ved hjelp av følgende kode som mal:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]"> bilde 1 </a>

Den første delen av denne koden refererer bildet og mappen der den finnes. Erstatt "images / bilde-1.jpg" med navn og utvidelse av bildet og mappen der den finnes. For eksempel, hvis bildet er kalt "dinosaur.jpg" og mappen heter "bilder", koden vil lese:

"Bilder / dinosaur.jpg"

Koden følgende "rel" referanser Lightbox og gir bildet et gruppenavn. Hvis du ønsker å inkludere flere bilder i én gruppe, bruke samme gruppenavn for hvert bilde.

Hint

  • Tilsett Javascript og CSS-kode til hver side som du vil bruke Lightbox.