Hvordan lage en Lightbox på nettstedet ditt

Hvordan lage en Lightbox på nettstedet ditt


Når du viser bilder i et galleri på et nettsted, kan mange webmastere bli frustrert av et nødvendig kompromiss. For å vise et galleri som passer på et nettsted besøkendes skjerm, må bildene være relativt liten. Den besøkende til nettstedet er dermed ute av stand til å se detaljene i bildene uten å klikke bort fra hovedgalleriskjermen. Heldigvis en relativt enkel Javascript-program som heter lysbord er fritt tilgjengelig. Denne applikasjonen lar besøkende til å se en større versjon av bildet uten å navigere bort fra galleriet siden. Brukeren klikker bare på bildet, og en større versjon av bildet vises over gjeldende side uten å navigere bort fra galleriet.

Bruksanvisning

Sette opp Lightbox på Web

1 Last ned Lightbox 2 skript fra lokeshdhakar.com. Pakke ut filene til en mappe på harddisken utpekt for dette formålet.

2 Åpne "index.html" filen i mappen du har definert for Lightbox filer. Kopier følgende tre linjer med Javascript:
<Script type = "text / javascript" src = "JS / prototype.js"> </ script>
<Script type = "text / javascript" src = "js / scriptaculous.js? Load = effekter, byggmester"> </ script>
<Script type = "text / javascript" src = "JS / lightbox.js"> </ script>

3 Legg de tre linjer med Javascript i overskriften på noen sider der vil du bruke Lightbox effekt i den rekkefølgen de står i trinn 2.

4 Legg til følgende linje med kode til din stilark, eller CSS-fil: <link rel = "stylesheet" href = "css / lightbox.css" type = "text / css" media = "screen" />

Legge Lightbox effekt til bilder

5 Legg inn koden: rel = "lightbox" til et bilde du vil vise ved å bruke Lightbox effekt. Sitatene rundt ordet "lightbox" er en del av koden. Derfor bør bildekoden ligne på følgende: <a href="images/image-1.jpg" rel="lightbox"> bilde 1 </a>

6 Legg til tekster til bildene dine hvis ønskelig. For å legge til bildetekster, plassere koden, title = "min bildetekst" umiddelbart etter rel tag. For et bilde med en bildetekst og Lightbox kode, vil koblingen nå har følgende struktur: <a href="images/image-1.jpg" rel="lightbox" title="my caption"> bilde 1 </ a>

7 Gjenta denne prosessen, og legger til kodene: rel = "lightbox" "og title =" min bildetekst "på alle bilder som du ønsker å vise med Lightbox kode.

8 Last opp alle redigerte sider, stilark og redigerte bilder til serveren hosting ditt nettsted.

Hint

  • For å øke hastigheten på å legge til rel = "lightbox" kode til alle bildene dine, kan du bruke en kopi / lim prosess. Åpne siden der du vil legge til effekten i et tekstredigeringsprogram, kopier koden rel = "lightbox", søk etter tag som begynner dine bilde lenker og lime inn koden på riktig sted. For eksempel, hvis katalogstrukturen din er satt opp som i eksempelet ovenfor, vil du søke etter <a href = "bilder" og lim den "rel =" lightbox "kode på riktig sted innenfor hver kobling.
  • Med Lightbox effekt, er det mulig å vise flere bilder på én side samtidig slik at brukerne kan se detaljene for hvert bilde. Ved hjelp av denne effekten, kan du bygge større gallerier på dine nettsteder uten å miste detaljer.
  • Utseendet på Lightbox effekt på ditt nettsted kan endres ved hjelp av CSS. Noen grunnleggende instruksjoner om hvordan du redigerer CSS ligger i nedlasting fra lokeshdhakar.com.
  • Selv om eksemplene brukes representerer en felles katalogstruktur for mange nettsteder, vær klar over at bildene for ditt nettsted kan være inneholdt i en annen katalog på serveren din. Vær oppmerksom på at bildene ikke kan være inneholdt i koden, <a href="images/image-1.jpg"> bilde # 1 </a> hvis du har satt opp et bilde katalog med en annen etikett eller i en annen plassering enn rotmappen på ditt nettsted.
  • All koden presenteres finnes innenfor "index.html" filen som er samlet i Lightbox nedlasting fra lokeshdakar.com.