În loc să utilizați un plugin încărcat care are caracteristici pe care nu le veți folosi niciodată, acest tutorial vă arată cum să creați o casetă lightbox super-simplă pentru manipularea imaginilor. Este perfect pentru galerii de imagini, portofolii și multe altele!

Pasul 1: marcarea

Deschideți editorul de text preferat (folosesc Coda) și să începem cu marcajele noastre HTML.

Notă: Dacă nu furnizați o DOCTYPE corectă și modulul de redare a paginilor în modul quirks, caseta de lumină nu se va afișa corect în Internet Explorer.

      
 
Super Lightbox simplu
 
Demo-ul nostru de simplu simplu lightbox. Iată link-urile de imagine: 
 
  Imaginea 1  
 
  Imaginea 2  
 
  Imaginea 3  
 
 
 
   

Notă: Am folosit clasa lightbox_trigger pe fiecare legătură care are o imagine pe care dorim să o afișăm în caseta noastră lightbox. Acest lucru devine util când vrem să vizăm acele elemente în scenariul pe care îl vom scrie.

Pasul 2: CSS

Să aplicăm câteva aspecte de bază ale stilului CSS pe pagina noastră. Pentru acest exemplu de bază, vom plasa toate CSS-ul nostru tag-uri în cadrul secțiune.

corp marja: 0; padding: 0; fundal: #efefef; text-align: center; / * folosit pentru a centra div în IE * / #wrapper width: 600px; marja: 0 auto; / * centrele div orizontal în toate browserele (cu excepția IE) * / background: #fff; text-align: left; / * resetează alinierea textului de la eticheta corporală * / border: 1px solid #ccc; border-top: nici unul; padding: 25px; / * Să adăugăm câteva stiluri CSS3, acestea se vor degrada grațios în browserul mai vechi și IE * / border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; 

Acum avem o pagină simplă, dar elegantă, în care putem testa fereastra noastră cu lightbox.

Pasul 3: Note despre CSS în Internet Explorer

Noi am folosit marja: 0 auto; pentru a centra centrul #wrapper div orizontal pe pagină. Acest lucru funcționează excelent pentru toate browserele, cu excepția ... rolelor ... ați ghicit-o, Internet Explorer. Pentru a rezolva această problemă, am folosit text-align: center; pe eticheta corpului care centrele copil divs (în cazul nostru, # Wrapper Div) orizontal pe pagină.

Cu toate acestea, folosind text-align: center; pe eticheta organismul va centraliza alinierea tot textul în divs copii, de asemenea. Pentru a rezolva aceasta, resetăm text-align: left; în #wrapper div pentru a restabili tot conținutul copilului suplimentar la alinierea stângă. Check out communitymx.com dacă sunteți interesat să aflați mai multe despre această problemă IE.

Pasul 4: HTML Lightbox

Acesta este aspectul marcaj HTML lightbox. Cu toate acestea, nu îl introduceți în marcajul HTML. Vom face asta dinamic cu jQuery. Înțelegerea marcajului HTML a luminii HTML ne permite să o stilizăm în mod corespunzător cu CSS.

 
Faceți clic pentru a închide
 
  
 

Notă: Nu există valoare pentru imagine src deoarece aceasta va depinde de link-ul pe care se face clic de către utilizator. Prin urmare, vom folosi javascript pentru a introduce dinamic valoarea mai târziu.

Pasul 5: Suprapunere negru CSS Lightbox

Să mergem mai departe și să inserăm CSS pentru căsuța noastră lightbox. Procedând astfel, elementele paginii noastre vor fi afișate corect mai târziu când inserăm dinamic codul HTML.

Mai întâi avem #lightbox div care acționează ca suprapunere negru. Vrem ca acest lucru să umple întregul port de vizualizare al utilizatorului, indiferent de rezoluția ecranului.

#lightbox position: fixed; / * păstrează fereastra lightbox în fereastra de vizualizare curentă * / top: 0; stânga: 0; lățime: 100%; înălțime: 100%; fundal: url (overlay.png) repeta; text-align: center; 

CSS este destul de simplă. Iată câteva aspecte importante:

• Poziția: fix face ca suprapunerea să apară corect în portul de vizualizare curent, indiferent de poziția utilizatorului pe ecran (partea de sus sau de jos a paginii). Acesta este locul unde folosirea DOCTYPE-ului potrivit vine la îndemână. Dacă IE rulează în mod quirks din cauza DOCTYPE greșit (sau nici una deloc), atunci suprapunerea noastră nu va apărea corect.
• lățime: 100%; înălțime: 100%; Aceasta face ca #lightbox div, care acționează ca suprapunere negru, să acopere întregul port de vizualizare, indiferent de rezoluția ecranului utilizatorului final.
• fundal: url (overlay.png) repeta; Am fi putut folosi culoarea RGBa pentru a face culoarea de fundal sa fie putin transparenta. Acest lucru ar fi necesitat ceva asemănător fundal: rgba (0,0,0, .7);. Cu toate acestea, deoarece această proprietate este destul de nouă, transparența culorii de fond nu va funcționa în IE (dacă nu aplicați anumite hack-uri). Deci, în loc să folosim hack-uri CSS3 și IE, vom crea un PNG de 1x1 pixeli în Photoshop cu fundal negru și vom stabili transparența la aproximativ 75%.

Pasul 6: Instrucțiuni de utilizator CSS Lightbox

Doar pentru a vă asigura că utilizatorii noștri nu sunt confuzi, vom adăuga un text în suprapunerea cu lightbox, afirmând că pot face clic oriunde pentru a avea fereastra lightbox să dispară.

#lightbox p text-aliniere: dreapta; Culoare: #fff; marja de-dreapta: 20px; font-size: 12px; 

Pasul 7: Imagine CSS cu Lightbox

Acum vrem să stilizăm imaginea care va apărea în caseta de lumină. Pur și simplu voi da niște efecte CSS3. Acestea, evident, nu vor apărea în browserele IE și mai vechi, dar se degradează grațios. Ați putea adăuga alte efecte aici, dacă doriți, ca o margine albă în jurul imaginii.

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

Notă:Adăugarea unui lățimea maximă va micșora imaginile de înaltă rezoluție la care s-ar putea conecta. Acest lucru vă ajută să vă asigurați că toate imaginile se încadrează în fereastra de vizualizare.

Așa ar arăta acum pagina noastră dacă am inserat HTML-ul nostru HTML în document (vom face asta cu javascript):

Imagine de la CSS Lounge Photostream pe Flickr

Pasul 8: Determinarea logicii

Dacă utilizatorul face clic pe un link către imagine, dorim să afișăm imaginea într-o casetă lightbox. Pentru a face acest lucru, dorim mai întâi să determinăm logica din spatele funcționalității noastre:

• User clicks link-ul cu clasa lightbox_trigger
  • Împiedicați browserul să urmărească în mod prestabilit linkul
  • Vedeți dacă cutie de lumină div este deja în interiorul documentului
    • Dacă există:
      • Găsiți și existente img eticheta în interiorul conţinut div.
      • Înlocuiți imaginile src valoare cu href valoarea oricărui link a fost făcută clic pe.
    • Dacă nu există:
      • inserați marcajul casetei de lumină în pagina cu imaginile src valoare setată la href valoarea oricărui link a fost făcută clic pe
• Permiteți apăsarea butonului lightbox (când este afișat) pentru ao face să dispară

Pasul 9: Javascript Inclusiv jQuery

Acum că avem marcajele noastre HTML, stilul CSS și logica javascript, este timpul să vă grăbiți codul și să obțineți funcționalitatea.

Mai întâi include biblioteca jQuery. Îmi place să o adaug chiar înainte de închidere corp etichetă folosind versiunea găzduită de jQuery.

Pasul 10: Javascript Custom Script

Să ne împachetăm codul scenariu tag-uri și document.ready de la jQuery

Vom include script-ul nostru personalizat după includerea bibliotecii jQuery. Setăm funcția jQuery folosind semnul dolar "$" în parametrul funcției, astfel încât nu trebuie să scriem "jQuery" de fiecare dată când dorim să folosim funcționalitatea jQuery. În schimb, putem folosi pur și simplu "$".

Pasul 11: Javascript lightbox_trigger Funcţie

Așa cum am explicat mai devreme în Pasul 1, pentru fiecare imagine legată care va folosi caseta lightbox, i-am atribuit o clasă de lightbox_trigger. În scenariul nostru, creăm o funcție care va declanșa de fiecare dată o legătură cu clasa lightbox_trigger este făcută clic pe.

$ ('. lightbox_trigger') faceți clic pe (funcția (e) // Codul care face ca caseta de lumină să apară);

Pasul 12: Javascript în interiorul funcției

În primul rând, dorim să împiedicăm acțiunea implicită. Acest lucru împiedică browserul să deschidă imaginea conectată într-o pagină nouă. (Pentru a vedea de ce folosim preventDefault () Click aici

e.preventDefault ();

Apoi, vom obține href din imaginea pe care o vom afișa în caseta lightbox de la link-ul pe care a fost făcut clic

var imagine_href = $ (acest) .attr ("href");

Aici intră logica noastră predeterminată. Deoarece introducem în mod dinamic HTML-ul nostru HTML, vrem să vedem mai întâi dacă există deja în document. Deci, vom rula o declarație if / else.

Dacă

În cazul în care cutie de lumină div există, vom înlocui img eticheta în interiorul conţinut div. De asemenea, ne vom asigura că src valoarea etichetei imaginii este setată pentru a se potrivi cu href de orice legătură a fost făcută.

dacă $ 'lightbox') lungimea> 0) // #lightbox există // inserați tag-ul img cu href link-ul clicului ca valoare src $ ('# content') html ('„); // afiseaza fereastra lightbox - poti folosi o tranzitie aici daca vrei, adica ... show ('fast') $ ('# lightbox') show (); 

altfel

Dacă noi cutie de lumină div nu poate fi găsit în document, îl vom crea și îl vom insera. Aceasta se va executa numai prima dată când se face clic pe o legătură lightbox.

altfel // # lightbox nu există // creați markup HTML pentru fereastra lightbox var lightbox = '
"+"
Faceți clic pentru a închide
"+"
'+ // inserați link-ul clicului pe href în img src'"+"
"+"
„; / / introduceti HTML lightbox in pagina $ ('body'). append (lightbox); 

Pasul 13: Javascript Ascunderea ferestrei lightbox

În cele din urmă, dorim să ascundem fereastra cu casete luminoase ori de câte ori utilizatorul face clic pe el. Deoarece div cutie de lumină este introdus după ce DOM-ul a fost deja construit (pagina a fost deja încărcată) trebuie să-i spunem jQuery că plasăm un nou div în pagina noastră și să urmărim clicurile pe aceste elemente noi. Facem acest lucru folosind .live () mai degrabă decât .click ()

$ ('# lightbox') live ('click', functie () $ ('lightbox').

Pasul 14: Codul final Javascript

Acum, că am examinat scriptul nostru cu lightbox, iată cum arată totul:

Produs final

Imagine de la CSS Lounge Photostream pe Flickr

Asta e! Acum aveți o soluție lightbox ușoară pentru afișarea imaginilor. Sper că v-ați bucurat de acest tutorial și ați învățat ceva nou! Vă mulțumim pentru lectură.

Opțiuni premium

Acest tutorial v-a învățat abordarea "Do-it-yourself", dar dacă preferați o soluție gata, Envato Market dispune de o mulțime de pluginuri lightbox disponibile. Iată o selecție a celor mai populare:

1. Evoluția Lightbox pentru WordPress

Lightbox Evolution este un instrument de afișare a imaginilor, conținutului html, hărților și videoclipurilor într-un stil "lightbox" care plutește deasupra paginii web. Folosind Lightbox Evolution, autorii site-urilor web pot afișa un sortiment vast de media în toate browserele majore, fără a naviga pe utilizatori departe de pagina de legătură. Există și o versiune jQuery.

Lightbox Evolution pentru WordPress

2. iLightBox Plugin revoluționar Lightbox

iLightBox vă permite să creați cu ușurință cele mai frumoase ferestre suprapuse recepționate utilizând biblioteca JavaScript jQuery. Prin combinarea suportului pentru o gamă largă de medii cu piele superbă și un API ușor de utilizat, iLightBox își propune să împingă cât mai mult posibil conceptul Lightbox.

iLightBox · Plugin revoluționar pentru Lightbox

3. PopupPress - Popupuri cu Slider & Lightbox pentru WP

PopupPress este un plugin Wordpress care vă permite să creați cu ușurință ferestre elegant suprapuse. Acest plugin este destinat să introducă orice tip de conținut într-un popup de cel mai rapid și mai ușor mod de pe orice pagină de WordPress. De asemenea, are o simplă statistică a sistemului pentru numărul de vizualizări ale ferestrelor pop-up. 

PopupPress - Popupuri cu Slider & Lightbox pentru WP