Snarare än att använda ett uppblåst plugin som har funktioner som du aldrig kommer använda, visar den här handledningen hur du skapar en super enkel ljuskälla för hantering av bilder. Det är perfekt för bildgallerier, portföljer och mer!

Steg 1: Markup

Öppna din favorittextredigerare (jag använder Coda) och låt oss börja med vår HTML-uppställning.

Notera: Om du inte tillhandahåller en korrekt DOCTYPE och sidan görs i quirks läge, kommer blixten inte att visas korrekt i Internet Explorer.

      
 
Super Enkel Lightbox
 
Vår super enkla lightbox demo. Här är bildlänkarna: 
 
  Bild 1  
 
  Bild 2  
 
  Bild 3  
 
 
 
   

Notera: Vi använde klassen lightbox_trigger på varje länk som har en bild vi vill visa i vår ljuskälla. Detta blir användbart när vi vill rikta in de element i skriptet vi ska skriva.

Steg 2: CSS

Låt oss använda några grundläggande CSS-styling till vår sida. För detta grundläggande exempel lägger vi in ​​alla våra CSS taggar inom sektion.

kropp marginal: 0; padding: 0; bakgrund: #efefef; text-align: center; / * används för att centrera div i IE * / #wrapper width: 600px; marginal: 0 auto; / * centrerar diven horisontellt i alla webbläsare (utom IE) * / bakgrund: #fff; text-align: left; / * återställer textjustering från kropps tagg * / border: 1px solid #ccc; border-top: none; padding: 25px; / * Låt oss lägga till några CSS3-stilar, dessa kommer att försämras graciöst i äldre webbläsare och IE * / gränsstråle: 0 0 5px 5px; -moz-gränsen-radien: 0 0 5px 5px; -webkit-gränsen-radien: 0 0 5px 5px; boxskugga: 0 0 5px #ccc; -moz-box-skugga: 0 0 5px #ccc; -webkit-box-skugga: 0 0 5px #ccc; 

Nu har vi en enkel men elegant sida där vi kan testa ut vårt ljusfönster.

Steg 3: Anteckningar om CSS i Internet Explorer

Vi använde marginal: 0 auto; att centrera vår #wrapper div horisontellt på sidan. Det här fungerar bra för alla webbläsare förutom ... trumman ... du gissade det, Internet Explorer. För att åtgärda problemet har vi använt text-align: center; på kroppsetiketten som centrerar barnsegment (i vårt fall, #wrapper div) horisontellt på sidan.

Men med hjälp av text-align: center; På kroppslabeln kommer du att centrera all text i barns divider också. För att åtgärda detta återställs vi text-align: left; i #wrapper-diven för att återställa allt vidare barninnehåll till vänsterjustering. Kolla in communitymx.com om du är intresserad av att lära dig mer om det här specifika IE-problemet.

Steg 4: Lightbox HTML

Det här är vad vår HTML-HTML-uppställning kommer att se ut. Lägg emellertid inte in i HTML-uppteckningen. Vi kommer att göra det dynamiskt med jQuery. Förstå HTML-märkningen för lightbox tillåter oss att stile det med CSS i enlighet med detta.

 
Klicka för att stänga
 
  
 

Notera: Det finns inget värde för bilden src eftersom det kommer att vara beroende av vilken länk som klickas av användaren. Därför använder vi javascript för att infoga värdet dynamiskt senare.

Steg 5: Light CSS Black Overlay

Låt oss fortsätta och sätt in CSS för vår ljuskälla. Genom att göra detta nu kommer våra sidelement att visas korrekt senare när vi dynamiskt sätter in vår HTML.

Först har vi vår #lightbox div som fungerar som den svarta överläggningen. Vi vill att detta ska fylla användarens hela visningsport, oavsett skärmupplösning.

#lightbox position: fixed; / * håller ljusfönstret i det aktuella visningsfältet * / top: 0; vänster: 0; bredd: 100%; höjd: 100%; bakgrund: url (overlay.png) repeat; text-align: center; 

CSS är ganska enkelt. Här är några höjdpunkter:

• läget: fast gör att överlägget visas korrekt i det aktuella visningsporten, oavsett användarens position på skärmen (överst eller nederst på sidan). Det är här med hjälp av rätt DOCTYPE som är till nytta. Om IE körs i quirks-läge på grund av fel DOCTYPE (eller ingen alls) kommer vår överlägg inte att visas korrekt.
• bredd: 100%; höjd: 100%; Detta gör vår #lightbox div, som fungerar som den svarta överlagringen, täcker hela visningsporten oavsett slutanvändarens skärmupplösning.
• bakgrund: url (overlay.png) repeat; Vi kunde ha använt RGBa-färg för att göra vår bakgrundsfärg något transparent. Detta skulle ha krävt något liknande bakgrund: rgba (0,0,0, 7);. Men eftersom den här egenskapen är ganska ny, fungerar inte bakgrundsfärgen genomskinlighet i IE (om du inte tillämpar vissa hackar). Så istället för att använda CSS3 och IE hackar skapar vi helt enkelt en 1x1 pixel PNG i Photoshop med en svart bakgrund och ställer in transparensen på cirka 75 procent.

Steg 6: Användarinstruktioner för Lightbox CSS

Bara för att se till att våra användare inte är förvirrade, lägger vi till lite text i överlådan i ljuslådan, med angivande att de kan klicka var som helst för att få larmrutan att försvinna.

#lightbox p text-align: right; färg: #fff; margin-höger: 20px; font-size: 12px; 

Steg 7: Lightbox CSS-bild

Nu vill vi ställa in bilden som kommer att visas i ljusrutan. Jag kommer helt enkelt att ge det några CSS3-effekter. Dessa kommer uppenbarligen inte att visas i IE och äldre webbläsare, men det försämras fortfarande graciöst. Du kan lägga till andra effekter här om du vill, som en vit kant runt bilden.

#lightbox img box-shadow: 0 0 25px # 111; -webkit-box-skugga: 0 0 25px # 111; -moz-box-skugga: 0 0 25px # 111; max-width: 940px; 

Notera:Lägga till en maximal bredd kommer att krympa alla högupplösta bilder som vi kan länka till. Detta bidrar till att alla bilder passar in i visningsporten.

Så här ser vår sida ut om vi sätter in vår lightbox-HTML i dokumentet (vi ska göra det med javascript):

Bild med tillstånd av CSS Lounge Photostream på Flickr

Steg 8: Bestämning av logiken

Om användaren klickar på en länk till bilden vill vi visa bilden i en ljuskälla. För att göra detta vill vi först bestämma logiken bakom vår funktionalitet:

• Användarklick länka till klassen lightbox_trigger
  • Förhindra att webbläsaren följer länken som standard
  • Se om ljuslåda div finns redan i dokumentet
    • Om det existerar:
      • Hitta och befintliga img tagga inuti innehåll div.
      • Byt ut bildens src värde med href värdet av vilken länk som helst klickades.
    • Om den inte existerar:
      • sätt in ljusboxmarkeringen i sidan med bilden src värde satt till href värdet av vilken länk som helst klickades
• Tillåt varje klick på ljuskällan (när den visas) för att försvinna

Steg 9: Javascript inklusive jQuery

Nu när vi har vår HTML-märkning, CSS-styling och javascript-logik, är det dags att dyka in i koden och få vår funktionalitet att fungera.

Först inkluderar vi jQuery-biblioteket. Jag gillar att lägga till det strax innan stängningen kropp tagg med jQuerys värdversion.

Steg 10: Javascript anpassat skript

Låt oss sätta in vår kod i manus taggar och jQuery's document.ready

Vi kommer att inkludera vårt anpassade skript strax efter att ha inkluderat jQuery-biblioteket. Vi ställer in vår jQuery-funktion med dollartecknet "$" i funktionsparametern, så vi behöver inte skriva "jQuery" varje gång vi vill använda jQuery-funktionaliteten. Istället kan vi helt enkelt använda "$".

Steg 11: Javascript lightbox_trigger Fungera

Som förklaras tidigare i steg 1, för varje länkad bild som använder ljusboxen, tilldelade vi den en klass av lightbox_trigger. I vårt skript skapar vi en funktion som kommer att elda varje gång en länk till klassen lightbox_trigger är klickat.

$ ('. lightbox_trigger'). klicka (funktion (e) // Kod som gör att ljusboxen visas);

Steg 12: Javascript inuti funktionen

Först vill vi förhindra standardåtgärden. Detta förhindrar att webbläsaren öppnar den länkade bilden på en ny sida. (För att se varför vi använder prevent () Klicka här

e.preventDefault ();

Därefter får vi href av bilden som vi kommer att visa i ljuskällan från länken som klickades

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

Det här är där vår förutbestämda logik verkligen spelar in. Eftersom vi dynamiskt lägger in vår lightbox-HTML vill vi först se om den redan finns i dokumentet. Så, vi kommer att köra ett if / else uttalande.

Om

Om ljuslåda div finns, kommer vi att ersätta img tagga inuti innehåll div. Vi ska också se till att src Värdet på bildtaggen är inställt för att matcha href av vilken länk som helst klickades.

om $ ('# lightbox'). längd> 0) // #lightbox existerar // infoga img tag med klickad länks href som src värde $ ('# content'). html'); // visa lightbox fönster - du kan använda en övergång här om du vill, dvs ... visa ('snabb') $ ('# lightbox'). visa (); 

Annan

Om vår ljuslåda div kan inte hittas i dokumentet, vi skapar det och lägger in det. Detta kommer bara att köras första gången en länk med ljuskälla är klickad.

annars // # lightbox existerar inte // skapa HTML-markup för lightbox-fönster var lightbox = '
"+"
Klicka för att stänga
"+"
'+ // sätt in klickad länks href i img src'"+"
"+"
'; // infoga lightbox HTML till sidan $ ('body'). append (lightbox); 

Steg 13: Javascript Göm lysrutan

Slutligen vill vi gömma ljusfönstret när användaren klickar på den. Eftersom div ljuslåda infogas efter att DOM redan är uppbyggd (sidan har redan laddats) måste vi berätta för jQuery att vi placerar en ny div på vår sida och att titta på för klick på de här nya elementen. Vi gör detta genom att använda .live () i stället för .click ()

$ ('# lightbox'). live ('klick', funktion () $ ('# lightbox'). hide (););

Steg 14: Javascript Slutkod

Nu när vi har granskat vårt lightbox-skript, så ser det här ut så här:

Slutprodukt

Bild med tillstånd av CSS Lounge Photostream på Flickr

Det är allt! Nu har du en lättlampa för att visa bilder. Jag hoppas att du njöt av denna handledning och lärde dig något nytt! Tack för att du läser.

Premium-alternativ

Denna handledning har lärt dig att göra det-själv-tillvägagångssättet, men om du föredrar en färdig lösning, har Envato Market massor av ljuskomponenter tillgängliga. Här är ett urval av de mest populära:

1. Lightbox Evolution för WordPress

Lightbox Evolution är ett verktyg för att visa bilder, html-innehåll, kartor och videor i en "lightbox" -stil som flyter överlagring av webbsidan. Med hjälp av Lightbox Evolution kan webbplatsförfattare visa upp ett brett sortiment av media i alla större webbläsare utan att navigera användare bort från länksidan. Det finns också en jQuery-version.

Lightbox Evolution för WordPress

2. ILightBox · Revolutionary Lightbox Plugin

iLightBox låter dig enkelt skapa de vackraste svarande överläggsfönstren med jQuery JavaScript-biblioteket. Genom att kombinera stöd för ett brett utbud av media med underbara skinn och ett användarvänligt API, syftar iLightBox till att driva ljuskonceptet så långt som möjligt.

iLightBox · Revolutionary Lightbox-plugin

3. PopupPress - Popup med Slider & Lightbox för WP

PopupPress är ett Wordpress-plugin som enkelt skapar eleganta överlappande fönster. Denna plugin är avsedd att infoga vilken typ av innehåll som helst i en popup på det snabbaste och enklaste sättet på vilken sida som helst av WordPress. Det har också en enkel systemstatistik för antalet visningar av popup-fönstren. 

PopupPress - Popup med Slider & Lightbox för WP