I stedet for å bruke en oppblåst plugin som har funksjoner du aldri vil bruke, viser denne opplæringen hvordan du lager en super enkel lysboks for håndtering av bilder. Den er perfekt for bildegallerier, porteføljer og mer!

Trinn 1: Markup

Åpne din favoritt tekstredigerer (jeg bruker Coda) og la oss starte med HTML-oppslaget vårt.

Merk: Hvis du ikke oppgir en riktig DOCTYPE, og siden gjøres i quirks-modus, vil lysboksen ikke vises riktig i Internet Explorer.

      
 
Super Enkel Lightbox
 
Vår super enkle lightbox demo. Her er bildelinkene: 
 
  Bilde 1  
 
  Bilde 2  
 
  Bilde 3  
 
 
 
   

Merk: Vi brukte klassen lightbox_trigger på hver kobling som har et bilde vi vil vise i vår lysboks. Dette blir nyttig når vi ønsker å målrette mot elementene i skriptet vi skal skrive.

Trinn 2: CSS

La oss bruke noen grunnleggende CSS styling til vår side. For dette grunnleggende eksemplet vil vi plassere alle våre CSS i koder i seksjon.

kropp margin: 0; padding: 0; bakgrunn: #efefef; tekst-Justering: center; / * brukes til å sentrere div i IE * / #wrapper bredde: 600px; margin: 0 auto; / * sentrerer diven horisontalt i alle nettlesere (unntatt IE) * / bakgrunn: #fff; tekst-Justering: venstre; / * Tilbakestiller tekstjustering fra kroppstempel * / grense: 1px solid #ccc; border-top: none; padding: 25px; / * La oss legge til noen CSS3-stiler, disse vil degradere grasiøst i eldre nettleser og IE * / border-radius: 0 0 5px 5px; -moz-grense-radius: 0 0 5px 5px; -webkit-grense-radius: 0 0 5px 5px; bokseskygge: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-boks-skygge: 0 0 5px #ccc; 

Nå har vi en enkel, men elegant side der vi kan teste ut vårt lysboksvindu.

Trinn 3: Merknader om CSS i Internet Explorer

Vi brukte margin: 0 auto; å sentrere vår #wrapper div horisontalt på siden. Dette fungerer bra for alle nettlesere bortsett fra ... trommevals ... du gjettet det, Internet Explorer. For å fikse dette problemet brukte vi tekst-Justering: center; på kroppsmerket som senterer barns div (i vårt tilfelle, #wrapper div) horisontalt på siden.

Imidlertid bruker tekst-Justering: center; På kroppsmerket vil senteret justere all tekst i barnedivene også. For å fikse dette, tilbakestilles vi tekst-Justering: venstre; i #wrapper div for å gjenopprette alt annet barninnhold til venstrejustering. Sjekk ut communitymx.com hvis du er interessert i å lære mer om dette bestemte IE-problemet.

Trinn 4: Lightbox HTML

Dette er hva vår lightbox HTML-oppslag vil se ut. Ikke legg det inn i HTML-oppslaget. Vi vil gjøre det dynamisk med jQuery. Forståelse av lightbox HTML markup tillater oss å style det med CSS tilsvarende.

 
Klikk for å lukke
 
  
 

Merk: Det er ingen verdi for bildet src fordi det vil være avhengig av hvilken kobling som klikkes av brukeren. Derfor vil vi bruke javascript til å sette verdien dynamisk senere.

Trinn 5: Lysbilde CSS svart overlegg

La oss gå videre og sett inn CSS for vår lysboks. Ved å gjøre dette nå, vil sideelementene våre vises riktig senere når vi dynamisk setter inn HTML-koden vår.

Først har vi vår #lightbox div som fungerer som den svarte overlegget. Vi vil at dette skal fylle brukerens hele visningsport, uansett skjermoppløsningen.

#lightbox posisjon: fast; / * holder lysboksvinduet i gjeldende visningsport * / topp: 0; venstre: 0; bredde: 100%; høyde: 100%; bakgrunn: url (overlay.png) gjenta; tekst-Justering: center; 

CSS er ganske grei. Her er noen høydepunkter:

• stilling: fast gjør at overlegget vises riktig i det nåværende visningsport, uansett brukerens posisjon på skjermen (øverst eller nederst på siden). Dette er hvor bruk av riktig DOCTYPE kommer til nytte. Hvis IE kjører i quirks-modus på grunn av feil DOCTYPE (eller ingen i det hele tatt), vil ikke overlegget vises riktig.
• bredde: 100%; høyde: 100%; Dette gjør vår #lightbox div, som fungerer som det svarte overlegget, dekker hele visningsporten uansett sluttbrukerens skjermoppløsning.
• bakgrunn: url (overlay.png) gjenta; Vi kunne ha brukt RGBa-farge for å gjøre bakgrunnsfargen litt gjennomsiktig. Dette ville ha krevd noe lignende bakgrunn: rgba (0,0,0, .7);. Men siden denne egenskapen er ganske ny, vil bakgrunnsfargenes åpenhet ikke fungere i IE (med mindre du bruker visse hack). Så i stedet for å bruke CSS3 og IE hacks, oppretter vi bare en 1x1 piksel PNG i Photoshop med en svart bakgrunn og setter gjennomsiktigheten på rundt 75 prosent.

Trinn 6: Brukermanual for CSS-brukerveiledning

Bare for å forsikre oss om at våre brukere ikke er forvirret, legger vi til tekst i lysboksen overlegg, slik at de kan klikke hvor som helst for å få lysboksen til å forsvinne.

#lightbox p text-align: right; farge: #fff; margin-right: 20px; font-size: 12 piksler; 

Trinn 7: Lysbilde CSS-bilde

Nå ønsker vi å stil bildet som vil vises i lysboksen. Jeg skal bare gi det noen CSS3-effekter. Disse åpenbart vil ikke vises i IE og eldre nettlesere, men det forringes fortsatt grasiøst. Du kan legge til andre effekter her hvis du vil, som en hvit ramme rundt bildet.

#lightbox img box-shadow: 0 0 25px # 111; -webkit-boks-skygge: 0 0 25px # 111; -moz-box-shadow: 0 0 25px # 111; en maksimal bredde på: 940px; 

Merk:Legge til en max bredde vil krympe eventuelle høyoppløselige bilder vi kan knytte til. Dette bidrar til å sikre at alle bilder passer inn i visningsporten.

Dette er hva vår side nå ville se ut om vi satt inn vår lightbox-HTML i dokumentet (vi skal gjøre det med javascript):

Bilde med foto av CSS Lounge Photostream på Flickr

Trinn 8: Bestemme logikken

Hvis brukeren klikker en kobling til bilde, vil vi vise bildet i en lysboks. For å gjøre dette, ønsker vi først å bestemme logikken bak funksjonaliteten vår:

• Brukerklikk lenke til klassen lightbox_trigger
  • Forhindre at nettleseren følger koblingen som standard
  • Se om lysboks div er allerede inne i dokumentet
    • Hvis den eksisterer:
      • Finn og eksisterende img tag inne i innhold div.
      • Bytt ut bildens src verdi med href verdien av hvilken som helst kobling ble klikket.
    • Hvis den ikke eksisterer:
      • sett inn lysboksen oppføring på siden med bildet src verdi satt til href verdien av hvilken som helst kobling ble klikket
• Tillat noe klikk på lysboksen (når det vises) for å få det til å forsvinne

Trinn 9: Javascript inkludert jQuery

Nå som vi har vår HTML-oppgradering, CSS-styling og javascript-logikk, er det på tide å dykke inn i koden og få vår funksjonalitet til å fungere.

Først inkluderer vi jQuery-biblioteket. Jeg liker å legge til det like før avslutningen kropp tagg med jQuery's hosted versjon.

Trinn 10: Javascript Custom Script

La oss pakke inn koden vår i manus tags og jQuery's document.ready

Vi vil inkludere vårt tilpassede skript like etter at du har inkludert jQuery-biblioteket. Vi konfigurerer vår jQuery-funksjon ved å bruke dollartegnet "$" i funksjonsparameteren, slik at vi ikke trenger å skrive "jQuery" hver gang vi vil bruke jQuery-funksjonalitet. I stedet kan vi bare bruke "$".

Trinn 11: Javascript lightbox_trigger Funksjon

Som forklart tidligere i trinn 1, for hvert koblet bilde som vil bruke lysboksen, tildelte vi det en klasse av lightbox_trigger. I vårt skript oppretter vi en funksjon som vil skje hver gang en kobling med klassen lightbox_trigger er klikket.

$ ('. lightbox_trigger'). klikk (funksjon (e) // Kode som lager lysboksen;

Trinn 12: Javascript inne i funksjonen

Først vil vi forhindre standardhandling. Dette forhindrer at nettleseren åpner det koblede bildet på en ny side. (For å se hvorfor vi bruker preventDefault () Klikk her

e.preventDefault ();

Deretter får vi href av bildet vi vil vise i lysboksen fra lenken som ble klikket

var image_href = $ (dette) .attr ("href");

Det er her vår forutbestemte logikk virkelig kommer til spill. Fordi vi setter inn vår lightbox-HTML dynamisk, vil vi først se om den allerede finnes i dokumentet. Så, vi vil kjøre en if / else setning.

Hvis

Hvis lysboks div eksisterer, vil vi erstatte img tag inne i innhold div. Vi vil også sørge for at src verdien av bilde tagget er satt til å matche href av hvilken som helst kobling ble klikket.

hvis ($ ('# lightbox'). lengde> 0) // #lightbox eksisterer // legg inn img-tag med klikket lenke href som src verdi $ ('# innhold'). html'); // vis lysboksen vindu - du kan bruke en overgang her hvis du vil, ie.e ... show ('fast') $ ('# lightbox'). show (); 

Ellers

Hvis vår lysboks div kan ikke bli funnet i dokumentet, vi vil opprette det og sette det inn. Dette vil bare løpe første gang en lenkekobling klikkes.

ellers // # lightbox eksisterer ikke // opprett HTML markup for lightbox-vinduet var lightbox = '
'+'
Klikk for å lukke
'+'
'+ // Sett inn klikket lenke's href i img src''+'
'+'
'; // sett inn lysboksen HTML til side $ ('body'). append (lightbox); 

Trinn 13: Javascript Skjul lysboksen Vindu

Til slutt vil vi gjemme lysboksvinduet når brukeren klikker på den. Fordi div lysboks er satt inn etter at DOM allerede er konstruert (siden har allerede lastet inn), må vi fortelle jQuery at vi plasserer en ny div på vår side og å se etter klikk på disse nye elementene. Vi gjør dette ved å bruke .live () i stedet for .click ()

$ ('# lightbox'). live ('klikk', funksjon () $ ('# lightbox'). skjul (););

Trinn 14: Javascript-sluttkode

Nå som vi har undersøkt vårt lightbox-skript, her er hvordan alt ser ut som:

Sluttprodukt

Bilde med foto av CSS Lounge Photostream på Flickr

Det er det! Nå har du en lett lightbox løsning for å vise bilder. Jeg håper du likte denne opplæringen og lærte noe nytt! Takk for at du leste.

Premium-alternativer

Denne opplæringen har lært deg selv-tilnærming, men hvis du foretrekker en ferdig løsning, har Envato Market mange lysboksplugger tilgjengelige. Her er et utvalg av de mest populære:

1. Lysbilde Evolution for WordPress

Lightbox Evolution er et verktøy for visning av bilder, html-innhold, kart og videoer i en "lightbox" -stil som flyter overhodet på nettsiden. Ved hjelp av Lightbox Evolution kan nettstedet forfattere vise frem et bredt utvalg av medier i alle de store nettleserne uten å navigere brukere bort fra koblingssiden. Det er også en jQuery-versjon.

Lightbox Evolution for WordPress

2. iLightBox · Revolusjonerende lysboksenplugin

iLightBox lar deg enkelt lage de vakreste lydhørste overleggene med jQuery JavaScript-biblioteket. Ved å kombinere støtte for et bredt spekter av medier med nydelige skins og en brukervennlig API, har iLightBox som mål å skape lysbokse-konseptet så langt som mulig.

iLightBox · Revolusjonerende lysboksenplugin

3. PopupPress - Popup med Slider & Lightbox for WP

PopupPress er et Wordpress-plugin som lar deg enkelt lage elegante overlappende vinduer. Dette pluginet er ment å sette inn hvilken som helst type innhold i en popup på den raskeste og enkleste måten på en hvilken som helst side av WordPress. Den har også en enkel systemstatistikk for antall visninger av popups. 

PopupPress - Popup med Slider og lysbok for WP