Două librării jQuery libere vor fi folosite pentru a crea această galerie. Quicksand și PrettyPhoto. Ele simplifică foarte mult crearea galeriei. Ca întotdeauna, puteți vedea rezultatul lucrării pe pagina demo, precum și să descărcați arhiva din galeriile de lucru și din toate fișierele sursă. Singurul dezavantaj, dacă pot spune așa, este crearea unei miniaturi manuale pentru imagini mari. Și, în toate privințele, această galerie merită atenție. Pe langa asta!
Marcaj HTML
Nu mă voi concentra în special pe stiluri, pe măsură ce folosim biblioteca PrettyPhoto deja pregătită. care este responsabil pentru creșterea imaginii, iar codul css este destul de mult. Cu toate acestea, este important de remarcat sunt 5 opțiuni de design mai mare imagine, cu toate că în mod ideal, toate cele 3, deoarece cele două versiuni eliminate numai rotunjire.
Portofoliul-categ # 123; margin-bottom. 30px; # 125;
.portofoliu-categ li # 123;
afișare. inline;
-Marginea din dreapta. 10px;
# 125;
.image-bloc # 123;
afișare. bloc;
poziție. relativă;
# 125;
.bloc de imagine img # 123;
de frontieră. 1px solid # d5d5d5;
border-radius. 4px 4px 4px 4px;
fundal. #FFFFFF;
umplutură. 10px;
# 125;
.bloc de imagine img. planare # 123;
de frontieră. 1px solid # A9CF54;
box-shadow. 0 0 5px # A9CF54;
# 125;
.portofoliu-zona li # 123;
float. stânga;
marjă. 0 12px 20px 0;
preaplin. ascunse;
lățime. 245px;
umplutură. 5px;
# 125;
.home-portofoliu text # 123; margin-top. 10px; # 125;
a. activ # 123; text-decor. subliniază; # 125;
// Selectați toți copiii din zona de portofoliu și scrieți la variabila
var $ data = $ # 40; ".portfolio-area" # 41;. clona # 40; # 41; ;
$ # 40; ". portofoliu-categ li" # 41;. clic # 40; funcție # 40; e # 41; # 123;
$ # 40; ".filter li" # 41;. removeClass # 40; „Activ“ # 41; ;
var filterClass = $ # 40; acest # 41;. attr # 40; „Clasa“ # 41;. sciziune # 40; „“ # 41;. felie # 40; - 1 # 41; # 91; 0 # 93; ;
dacă # 40; filterClass == 'toate' # 41; # 123;
var $ filteredData = $ date. găsi # 40; “.portfolio-ITEM2' # 41; ;
# 125; altfel # 123;
var $ filteredData = $ date. găsi # 40; '.portfolio-item2 [tipul de date =' + filterClass + ']' # 41; ;
# 125;
$ # 40; ".portfolio-area" # 41;. nisipuri mișcătoare # 40; $ filteredData. # 123;
durată. 600.
adjustHeight. „Automat“
# 125;. funcție # 40; # 41; # 123;
lightboxPhoto # 40; # 41; ;
# 125; # 41; ;
$ # 40; acest # 41;. addClass # 40; „Activ“ # 41; ;
return false;
# 125; # 41; ;
Deci, facem clic pe elementul din listă, atunci acest selector conține un element din listă, care este Li. l luăm valoarea atributului de clasă și de a folosi metoda de divizare diviza numele clasei în mai multe părți, granița este un spațiu (care este, în cazul în care clasa a fost «toate active» după descompunere, obținem o serie de «tot» și «activ»). O altă metodă este deja felie selectați primul element al șirului (în acest caz «toate») și scrieți rezultatul obținut în filterClass variabilă. Dacă nu există spațiu atunci numele clasei nu se va schimba.
Mai mult, verificăm dacă într-o variabilă filtru de clasă este o linie totală. apoi folosind metoda .find, selectăm toate elementele cu clasa portofoliu-element 2 din matricea de date $. pe care am considerat-o mai sus. Elementele selectate (care sunt toate elementele listei, adică toate imaginile) sunt plasate în variabila filteredData.
Și, în cele din urmă, variabila rezultată este transmisă jetoanelor din bibliotecă. care produce filtrarea imaginilor. E vorba de filtrare.
Acum, în ceea ce privește extinderea imaginii în fereastra pop-up. Totul este mult mai simplu aici.
jQuery # 40; "o [rel ^ = 'prettyPhoto']" # 41;. prettyPhoto # 40; # 123;
animationSpeed. 'Fast'.
slideshow. 5000.
temă. 'Facebook'.
SHOW_TITLE. fals.
overlay_gallery. fals
# 125; # 41; ;
Urmărirea unui clic pe o legătură al cărei atribut rel începe cu prettyPhoto. După aceea, biblioteca prettyPhoto intră în joc. iar imaginea crește în mod miraculos. Apropo, noi trecem și câțiva parametri. Cum ar fi viteza animației - rapid, întârzierea în expunerea de diapozitive - 5 secunde, Facebook tema de design (doar 5 astfel încât acestea sunt în imagini / directorul prettyPhoto), precum și să interzică afișarea numelor imaginilor și a crește imaginea atunci când treceți cu mouse-ul. Documentația completă despre prettyPhoto poate fi găsită aici.