Hvordan lage en bildeviser med Lightbox2 - dummies

Grupper av bilder kan presenteres på nettet på en rekke forskjellige måter. Det er gallerier, skyveknapper og lysbildebildevisere, som alle kan bygges på ubegrenset antall måter. For eksempel kan bildevisningsprogrammer bygges ved hjelp av en kombinasjon av HTML, CSS, JavaScript, jQuery eller Flash.

Selv om den beste løsningen vil være standardkompatibel og ha et lite fotavtrykk på omtrent 25k eller mindre, er den riktige løsningen ofte avhengig av nettstedets spesifikke behov.

For å illustrere, antar du designer et nettsted for en kunstner som vil ha en porteføljeside med åtte små bilder organisert i et rutenett, og når du klikker på noen av de mindre bildene, en større versjonen vil vise på skjermen. En av de beste løsningene for denne typen behov er Lightbox2-bildeviseren.

I tillegg til å være en av de mest populære bildeviserne i dag, er den også lett og super enkel å installere.

Lysbilde2-bildeviseren virker best når du har to sett med bilder. Det første settet er de minste miniatyrbildene som vises når siden åpnes i nettleseren, og det andre settet er de større bildene som kan ses gjennom Lightbox2-widgeten.

Følgende trinn viser hvor enkelt det er å legge til lysbilde2-bildevisningsprogrammet på en nettside:

1. Gå til webområdet Lightbox2 og last ned en kopi av Lightbox2-filene.

   Lysboksen Zip-filen inneholder flere filer, inkludert en prøvefil som heter indeksen. html, en mappe med to JavaScript-filer, en mappe med en CSS-fil og en bildemappe med alle bildene som brukes i Lightbox2-bildeviseren. Kopier det ekstraherte innholdet i denne Zip-filen i lysmappen din, administrert nettsted.

2. (Valgfritt) Hvis du bruker Dreamweaver, må du opprette et administrert nettsted til en ny mappe på datamaskinen din, kalt lysboksen.

   Velg Site → Nytt nettsted for å opprette et nytt, administrert nettsted til den nye Lightbox-mappen. I feltet Nettstednavn skriver du inn navnet på lysboksen og i feltet Lokal nettstedmappe, blar til og velg den nye lysboksen-mappen.

3. Åpne filen som heter lightbox. html i Dreamweaver eller i din foretrukne webredaktør.

   Oppsettet for denne filen inneholder en tabell fylt med åtte miniatyrbilder, klar for å legge til Lightbox2-koden.

   

4. Legg til følgende koblinger til JavaScript og CSS-filene til koden din:

   Disse koblingene kaller de riktige filene som hjelper til med å aktivere lysboksen.

5. Konverter hver av miniatyrbildene til hyperkoblinger som peker på deres respektive nærbilder og inkluderer rel = "lightbox [mygroup]" -attributtet som aktiverer lysboksen.

   Pass på at du erstatter minegruppen med et beskrivende navn for din bestemte gruppe bilder.

   For eksempel, endre koden for det første bildet fra dette:

   Til dette, hvor miniatyrbildet kobler til nærværet:

6. (Valgfritt) Hvis du vil at bildene skal inneholde en bildetekst, legg til tittelattributtet til linketiketten, som vist her:

7. Gjenta trinn 5 og 6 for de resterende bildene i tabellen.

   Hvis ønskelig, samsvarer med titlene på dine nærbilde med den alternative teksten til deres respektive miniatyrbilder.

8. Lagre filen din og forhåndsvisning av lysbildefremviseren 2 ved å starte siden i din foretrukne nettleser.

   Klikk på noen av miniatyrbilder for å se hvordan lyset2 fungerer. Du bør se nettlesersiden dim når et popup-vindu vises over det som viser nærbildet av miniatyrbildet du klikket på.

9. Med nærbildebildet på skjermen holder du musen over den for å se en venstre eller hvit navigasjonspille vises øverst på nærbildebildet.

   Ved å klikke på venstre eller høyre side av bildet forflytter du deg fra ett nærbilde til neste. Under nærbildet bør du også se tittelen på bildet sammen med det nåværende og totale antall bilder i settet (for eksempel Ikke i Kansas, bilde 5 av 8) og en stor X du kan klikke for å lukke lysboksen og gå tilbake til det overordnede nettleservinduet.

   

Hvis din lysbildevisningsbilde av en eller annen grunn ikke fungerer som den skal, går du tilbake gjennom trinnene for å kontrollere at du har lagt til alle koblingene på riktig måte. For ytterligere hjelp, besøk Lightbox2 Forum.