Hvordan lage en Lightbox effekt

Hvordan lage en Lightbox effekt


En lightbox brukes til å vise bilder på ditt nettsted i en popup overlegg boks i stedet for å omdirigere til en ny side. Lightbox bruker Javascript og XHTML for å lage sin effekt, og bruker en vedlagt CSS stilark for å definere parameterne som høyde og bredde. Lysbord er nyttige for nettstedet gallerier, eller for hvilken som helst nettside som ønsker å sette bilder på skjermen i en ryddig og oversiktlig måte.

Bruksanvisning

1 Last ned Lightbox skript fra Lightbox nettstedet. Du trenger dette senere.

2 Åpne HTML-filen der du ønsker å sette inn Lightbox. I overskriften delen under "<head>" sette inn javascript linker som følger:

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

4 Åpne lightbox.css, som er inkludert i den nedlastede filen, og se over Lightbox egenskaper. Dette vil ha fargen på Lightbox grensen, størrelsen på Lightbox og andre funksjoner på Lightbox listet ut.

5 Sett opp bildene dine slik at de bruker lightbox stedet for å omdirigere. For å gjøre dette, må du sette den riktige koden når du har et bilde i kroppen av HTML.

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

Erstatt "images / image-1.jp" med banen til bildefilen. Erstatt "min bildetekst" med noen bildetekst du ønsker at Lightbox å vise. Slett dette hvis du ikke vil ha en bildetekst. Erstatt "image # 1" med teksten du ønsker å bli oppført å linke til bildet.

6 Last opp din HTML-fil og alle filene du har lastet ned til din nettside. Du vil nå kunne se Lightbox effekt på nettsiden din.

Hint

  • Test din nettside på ulike nettlesere for å sørge for at det er universelt funksjonell.