Lumina perfectă? Folosind PhotoSwipe cu jQuery

Am întâlnit recent o bibliotecă JavaScript numită PhotoSwipe, și sunt cu adevărat impresionată. Este o bibliotecă strălucitoare care suprapune o imagine sau un grup de imagini pe pagina dvs. curentă, un efect popular cunoscut sub numele de cutie de lumină. PhotoSwipe este în prezent dezvoltată de Dmitri Semenov - a reconstruit-o anul trecut, când a preluat proiectul. Îmbunătățirile includ:

• modulare: PhotoSwipe este construit în mai multe module, permițându-vă să ștergeți particularitățile de care nu aveți nevoie. Aceasta păstrează biblioteca foarte ușoară.
• sensibil: o caracteristică indispensabilă prin toate mijloacele. Photoswipe servește dimensiunea corespunzătoare a imaginii în funcție de portul de vizualizare curent.
• Atingeți gestul: PhotoSwipe acceptă anumite gesturi de atingere care permit utilizatorilor să interacționeze prin atingere și printare, oferindu-le funcții pop-up, zoom și închidere.

Singurul dezavantaj este că PhotoSwipe nu va ieși din cutie. După cum declară dezvoltatorul:

"PhotoSwipe este simplu și rapid pentru utilizatorii finali, nu pentru dezvoltatori. Nu este un plugin simplu jQuery, cel puțin cunoștințele JavaScript de bază sunt necesare pentru a instala.

Dar poate fi folosit împreună cu alte biblioteci. În acest tutorial, vom examina cum să folosim PhotoSwipe cu jQuery. Vom face întregul proces ușor de înțeles, chiar dacă nu sunteți bine familiarizat cu JavaScript pur.

Să începem.

1. Noțiuni de bază

Vom începe cu:

1. Crearea directoarelor de proiect.
2. Crearea unui document HTML.
3. Conectarea la jQuery. În acest tutorial am de gând să folosesc jQuery 2.0, de aceea suport doar browserele moderne.
4. Prindeți copii ale bibliotecii PhotoSwipe, care cuprinde fișierele: photoswipe.min.js, photoswipe-default.min.js UI- (codul care construiește interfața PhotoSwipe), default-skin.css, default-skin.png, default-skin.svg, șipreloader.gif.
5. Aranjați fișierele în ordinea preferată a directorilor și le legați în fișierul HTML.

2. Structurarea codului HTML

Structura HTML este cea mai esențială parte din moment ce va conduce în cele din urmă modul în care vom scrie JavaScript. Aici vom presupune că avem câteva imagini, după cum urmează:

Atribute de date

În afară de atributele de clasă și Schema (care vor ajuta la SEO), am adăugat și o date-* atribut în tag-ul de ancorare care împachetează imaginea. Aceasta stochează dimensiunea completă (lățimea x înălțimea) a imaginii.

Mai multă marcare

Acum adăugăm marcajul pe care PhotoSwipe îl va folosi pentru a suprapune imaginile complete. Adăugați acest lucru chiar înainte de eticheta de închidere a corpului, .

Suntem cu toții setați cu codul HTML, deci acum putem continua cu JavaScript. Așa cum am menționat, vom folosi jQuery.

3. jQuery

Imaginile noastre sunt grupate într-un div cu imagine clasă. Pot exista mai multe grupuri de imagini în cadrul paginii, prin urmare, prin fiecare .imagine element.

$ ('. imagine') fiecare (funcția () ); 

Detalii

PhotoSwipe ne cere să furnizăm sursa de imagine completă împreună cu mărimea acesteia. Pentru a avea grijă de acest lucru, vom crea o funcție care va trece prin eticheta de ancorare pentru a obține aceste detalii, după cum urmează:

$ () var $ pic = $ (this), getItems = function () var elemente = []; $ pic.find ('a' var 'href = $ (acest) .attr (' href '), $ size = $ (this) .data (' = $ size [1]; var element = src: $ href, w: $ lățime, h: $ height items.push (item);) return items; var items = getItems; 

Să rupem acest cod în câteva bucăți:

1. Mai întâi inițializăm cu o matrice goală în articole = [].
2. Apoi bifăm fiecare etichetă de ancorare cu .fiecare() metodă.
3. $ href = $ (acest) .attr ('href') obține valoarea în href atribut, stocând calea imaginii complete.
4. $ size = $ (this) .data ('size') împărțit ('x') va obține valoarea lui date de dimensiuni atribut prin jQuery .date() metodă. Apoi folosim Despică()metoda de separare a valorii.
5. Putem obține valoarea lățimii și a înălțimii separat cu: $ width = $ dimensiune [0] și $ height = $ size [1].
6. Utilizarea Apăsați() metodă vom colecta această informație într-o matrice.

Testați în Consola

Acum avem sursa de imagine și dimensiunea imaginii stocate în articole variabil. Pentru a verifica, puteți executa variabila prin console.log () și ar trebui să găsiți următoarea structură de date în DevTools.

Clic

Apoi, ne legăm figura element cu clic eveniment, construi o instanță PhotoSwipe, treci articole împreună cu opțiunile de configurare și, în final, inițializați PhotoSwipe.

var $ pswp = $ ('.pswp') [0]; $ pic.on ('click', 'figura', functie (eveniment) event.preventDefault (); var $ index = $ (this) .index (); var options = index: $ index, bgOpacity: showHideOpacity: true // Inițializați PhotoSwipe var lightBox = nou PhotoSwipe ($ pswp, PhotoSwipeUI_Default, elemente, opțiuni); lightBox.init ();); 

Motivul pentru care folosim figura elementul pe care trebuie să faceți clic pe, mai degrabă decât eticheta de ancorare, este astfel încât să putem recupera cu ușurință indexul (sau ordinea ulterioară). Acest lucru ne permite să informăm PhotoSwipe cu privire la indexul corect pentru a suprapune imaginea corespunzătoare.

Concluzie

Tocmai am implementat PhotoSwipe folosind jQuery. Codul este comparabil mai subțire și mai ușor de înțeles decât atunci când este scris în JavaScript. 

Acum ați început, puteți de asemenea să ajustați PhotoSwipe cu o mână de opțiuni furnizate și chiar preload imaginea, astfel încât veți vedea imaginea completă imediat după ce faceți clic. Voi lăsa stilurile la imaginația ta, deoarece nu există reguli stricte pentru aceștia.

Sper că ați învățat ceva din acest tutorial și că veți găsi uneori util. Nu uitați să verificați demo-ul live și lăsați întrebările sau gândurile în comentarii!

Resurse suplimentare

• Noțiuni de bază cu PhotoSwipe
• Imagini reactive cu PhotoSwipe
• 30 de zile pentru a afla jQuery
• Tot ce trebuie să știți despre atributul de date HTML5
• Îmbunătățiți capacitatea de descoperire a site-ului dvs. cu marcaj semantic