javascript lightbox tutorial

Indlæg af Dorte Søndergaard Pe     opdateret: 2011-09-03

Lightbox er et gratis open source JavaScript bibliotek, som du kan bruge til at præsentere et billede galleri på din webside i en visuelt tiltrækkende måde . Når en bruger klikker på et af dine thumbnail billeder , vil Lightbox fade ud sidens baggrund og zoome ind på billedet til at fylde browservinduet . Skaberen af Lightbox har gjort det muligt at tilføje denne funktionalitet til dit websted med kun et par mindre ændringer til din HTML -kode

Du skal bruge: .
webbrowser
HTML-side ( r ) .
Billeder .


1 .
Åbn din webbrowser og gå til Lightbox hjemmeside ( se Resources ) . Download den nyeste version af biblioteket .
2 .
Udpak ZIP -fil , som du har downloadet . Den indeholder en prøve HTML -fil og tre mapper : " css ", som indeholder typografiark, der anvendes af Lightbox " billeder ", som indeholder billeder, der bruges af biblioteket , og " js ", som indeholder Lightbox kildekode samt Prototype og Scriptaculous biblioteker , der kræves af Lightbox .
3 .
Kopier " css ", " billeder " og " js " mapper til en placering , der er tilgængeligt fra din webside . De resterende trin vil antage, at du har placeret dem i samme mappe som dit HTML -fil , og hvis du lægger dem i en anden placering , skal du justere stier i disse handlinger herefter
4

Åbn HTML- fil, der vil bruge Lightbox i din foretrukne teksteditor .
5 .
Hvis du ikke allerede bruger Prototype og Scriptaculous biblioteker på din webside , skal du tilføje følgende to linjer i " "i HTML-filen :



Du kan springe dette trin , hvis du allerede bruger Prototype og Scriptaculous .
6 .
tilføje følgende to linjer i " " sektionen efter de linjer, der indlæses Prototype og Scriptaculous :


7 .
Tilføj Lightbox effekt til et billede links ved at tilføje rel=" lightbox " attribut til linkets " " tag , og giver en valgfri titel , der vil blive vist i pop-up boks. For eksempel, hvis du har et link af følgende form :
;
Re-skrive linket som følger :
<; img src=" Image1Thumbnail. jpg "/>

gode råd og advarsler


  • Billeder kan også grupperes , så brugeren kan navigere hurtigt til den forrige eller næste billede i et galleri uden at lukke og genåbne Lightbox vinduet . At knytte et billede med en gruppe , navnet på gruppen i firkantede parentes efter " lightbox "i " rel " attributten sat . For eksempel :
  • Brugeren kan klikke på " Forrige "og " Next " knapperne i Lightbox at bevæge sig gennem det sæt af billeder , der deler den samme gruppe navn .


  • Previous:hvordan man åbner den Inspiron 640 laptop Next:hvordan man kan kontrollere for tomme var i javascript



     

    Kommentarer

    Code:
    change