Hvordan sette Maksimal størrelse i Lightbox



Lightbox er et generelt begrep for en "modal" vinduet som legges en webside når et bilde blir klikket, viser en større versjon av bildet. Den opprinnelige jQuery script, nå kalt "Lightbox 2," har tjent som grunnlag for mange andre scripts som siden har blitt utgitt, for eksempel PrettyPhoto, Litebox og Slimbox. Hvert manus er skrevet med sine egne unike stiler og variabler, og kan ha ulike metoder for å kontrollere den maksimale størrelsen på bilder. PrettyPhoto, for eksempel, kan du angi en standard høyde og bredde i skriptet inn i hodet av HTML-dokumentet. Med Lightbox2, må endringer gjøres til skript for å tillate et bilde for å tilpasse seg brukerens skjerm størrelse.

Bruksanvisning

1 Last ned den nyeste versjonen av Lightbox script fra den offisielle Lightbox2 siden. Pakk manuset mappen, og åpne den for å finne "lightbox.js" fil. Åpne filen i en HTML eller tekst editor.

2 Finn følgende kodelinjer rundt linje 262 av skriptfilen:

this.lightboxImage.width = imgPreloader.width;

this.lightboxImage.height = imgPreloader.height;

Plasser markøren på begynnelsen av hver linje og skriver to skråstreker for å deaktivere kode:

//this.lightboxImage.width = imgPreloader.width;

//this.lightboxImage.height = imgPreloader.height;

3 Skriv inn en ny linje under de to linjene du har deaktivert. Kopier og lim inn følgende kode til ny linje:

if (imgPreloader.width> 850)

imgPreloader.width = 800;

if (imgPreloader.height> 620) imgPreloader.height = 600;

Som standard vil denne oppdaterte koden angir høyeste bredde og høyde 800 piksler bred og 600 piksler høy. For å justere verdiene til ønsket dimensjoner, legger 50 til ønsket bredde og redigere den første tallverdi. Rediger den andre verdien med den nøyaktige bredden. Rediger tredje og fjerde verdier med ønsket høyde verdi, og legger 20 til tredje verdi. De ekstra piksler gir mulighet for polstring av Lightbox beholderen.

4 Lagre skriptfilen og åpne "lightbox.css" filen som ligger i "css" -mappen. Legg en "max-høyde" og "max-width" erklæring til "#lightbox img" velger og sett verdiene til din valgte høyde og bredde. For eksempel:

lysbilde img {width: auto; height: auto; max-width: 800px; max-height: 600px;}

5 Lagre filen og få tilgang til webserveren. Endre navn på eksisterende "lightbox.js" og "lightbox.css" filer på serveren din aa fail-safe i tilfelle noe går galt med de redigerte filene. Last opp dine endrede filer, og deretter tømme nettleserens cache. Test dine endringer ved å klikke på en Lightbox-aktivert bilde og fortsette å finpusse stilene som ønsket.