Hvordan: Lightbox med HTML

Hvordan: Lightbox med HTML


Lightbox gir webutviklere til å vise flere bilder på en enkelt HTML-side. Ved å klikke på en endret kobling vil vise hver tildelt bilde i et internt pop-up vindu. Effekten oppnås ved hjelp av Javascript-kode.

Bruksanvisning

1 Last opp bilder til din webserver. For visning formål, prøver å gjøre hver bilde samme pikselstørrelse. Merk URL-banen av hver fil.

2 Lag en "lightbox" katalog i hovedmappen til webserveren. Du vil lagre alle Lightbox er elementer i denne katalogen.

3 Last ned Lightbox script. Pakk ut filen.

4 Last opp css, bilder og js mapper til "lightbox" katalog på webserveren.

5 Åpne HTML-filen du ønsker å legge til Lightbox. Legg til følgende fire linjer med kode mellom <head> </ head> taggene:

<Script type = "text / javascript" href = "http://www.yoururl.com/lightbox/css/lightbox.css" type = "text / css" media = "screen" />

Erstatt "yoururl.com" med hovednettadressen til nettstedet ditt.

6 Legg Lightbox Javascript-kode i HTML. Plasser følgende kode mellom <body> </ body> tags: <a href="http://www.yoururl.com/images/image-1.jpg" rel="lightbox" title="my caption"> bilde 1 </a>

Erstatt "http://www.yoururl.com/images/image-1.jpg" med URL-banen til en av de bildene du lastet opp i trinn 1. Alter "min bildetekst" til hva bildetekst du ønsker tildelt som bilde. Change "image # 1" til tekst eller bilde kode.

7 Lagre HTML-dokumentet. Last opp til webserveren. Forhåndsvise siden for å sikre at Lightbox skriptet fungerer som den skal.

Hint

  • Hvis bildene dine ikke vises, sjekk "lightbox.css" og "lightbox.js" filer og sikre at deres bilde filbaner er riktige.