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.