Galerie de imagini cu miniaturi js. Web design și optimizare pentru motoarele de căutare. Galeria jQuery „Galleriffic”

Am revizuit de multe ori diverse galerii de imagini și am adunat o colecție extinsă de prezentări de diapozitive și plugin-uri spectaculoase. Lightbox este, de asemenea, disponibil exclusiv pe CSS3, fără a conecta biblioteci js suplimentare. Dar timpul nu stă pe loc, utilizatorii folosesc din ce în ce mai mult diverse dispozitive mobile pentru a naviga pe internet, ceea ce înseamnă că adaptabilitatea elementelor web și în special a galeriilor foto cu efectul „ ” devine una dintre prioritățile cărora designerii și dezvoltatorii web ar trebui să le acorde atenție la.

Vă prezint o altă selecție de 15 adaptive Pluginul jQuery ov, care sunt prietenoase atât cu browserele desktop și se potrivesc perfect pe ecranele diverselor dispozitive mobile (laptop-uri, smartphone-uri, tablete etc.).

Urmăriți demo-ul de pe site-urile dezvoltatorilor, descărcați pluginul care vă place și creați, creați, creați...

1. iLightbox

iLightbox este un plugin jQuery Lightbox ușor, cu suport pentru o gamă largă de tipuri variate fișiere: imagini, videoclipuri, Flash/SWF, conținut Ajax, cadre și hărți încorporate. Acest plugin adaugă și butoane retele sociale, care permite utilizatorilor să partajeze conținut prin Facebook, Twitter sau Reddit. O oportunitate excelentă de a organiza prezentări de diapozitive, galerii de imagini și videoclipuri spectaculoase, cu vizionare în modurile normal și ecran complet.

iLightbox funcționează destul de repede și atunci când este vizualizat dispozitive mobile, afișează mai mult decât corect conținutul procesat. Printre altele, folosind acest plugin, puteți implementa cu ușurință afișarea blocurilor de informații ca o fereastră modală.

Dependenta: jQuery
Suport pentru browser: IE7+, Chrome, Firefox, Safari și Opera
Licență: Diavolul stie)))

2. SwipeBox

Swipebox este un plugin JQuery cu suport ecrane tactile platforme mobile. Pe lângă imagini, pluginul acceptă videoclipuri încorporate de pe Youtube și Vimeo. Swipebox este foarte ușor de atașat la orice proiect; pluginul are mai multe opțiuni intuitive pentru personalizarea funcționalității și comportamentului său. Site-ul web al dezvoltatorului are documentație detaliată despre conectarea și utilizarea pluginului, fără pufuri inutile, totul este exact la obiect, așa că cred că nu va fi dificil să-mi dau seama ce, unde și de ce.

Dependenta: jQuery
Suport pentru browser: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android și Windows Phone
Licență: Nu m-am hotarat, poate vei avea noroc)))

3.MagnificPopup

Un plugin lightbox cunoscut și bine dovedit bazat pe jQuery sau Zepto.js. Autorul pluginului este Dmitry Semenov, care este și dezvoltatorul pluginului PhotoSwipe, despre care voi vorbi mai jos. Vine ca un plugin jQuery/Zepto, are mai multe oportunități ample lipsesc în PhotoSwipe, cum ar fi suportul video, afișarea hărții și implementarea conținutului Ajax ferestre modale cu forme încorporate. După toate criteriile, acesta este un alt instrument grozav pentru un dezvoltator web. Există un plugin separat pentru WordPress și documentație detaliată despre configurare și utilizare. Singurul lucru deprimant este lipsa documentației în limba rusă, judecând după nume și prenume, autorul pare a fi rus, nu a înțeles niciodată dacă a fost dăunător, sau din cauza unei conștiințe imaginare a propriei sale sofisticari, dar bla. Ei bine, bine, cine trebuie să-și dea seama, nici noi nu am fiert ceaiul fiert moale))).

Dependenta: jQuery 1.9.1+ sau Zepto.js
Suport pentru browser: IE7 (parțial), IE8+, Chrome, Firefox, Safari și Opera
Licență: licență MIT

4.PhotoSwipe

Dependenta: Javascript sau jQuery
Suport pentru browser
Licență: licență MIT

11.FeatherLight

Un plugin lightbox de 6 kbit pentru dezvoltatori mai mult sau mai puțin pricepuți, echipat cu toate cele mai necesare funcții. Pe lângă suportul pentru toate tipurile de conținut obișnuite (text, imagini, iframe, Ajax), există posibilitatea de a conecta altele suplimentare și, de asemenea, puteți dezvolta propriul dvs. extensie nativă pentru acest plugin, care vă va satisface pe deplin nevoile atunci când creați un nou proiect. Cum funcționează toată chestia asta (dezvoltarea extensiilor), nu m-am uitat cu adevărat, dar cei care instalează acest plugin cred că își vor da seama))).

Dependenta: jQuery
Suport pentru browser: IE8+, Chrome, Firefox, Safari și Opera
Licență: licență MIT

12. LightGallery

LightGallery— un plugin lightbox multifuncțional cu multe caracteristici suplimentare. Vine cu peste 20 de opțiuni pentru a personaliza cele mai mici detalii ale Lightbox-ului. Există totul aici, bine, sau aproape totul)). Galerie completă de imagini cu miniaturi bine aranjate, elemente de navigare și derulare a miniaturilor. Markup HTML simplu sub forma unei liste neordonate

Aspect

folosind CSS

LightGallery

Dependenta: jQuery
Suport pentru browser: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android și Windows Phone
Licență: licență MIT

13. StripJS

Neobișnuit, aș spune chiar: o implementare neobișnuită a casetei de lumină, sau mai degrabă, o prezentare neobișnuită a conținutului, atunci când o imagine sau un videoclip, în designul casetei de lumină, apare în dreapta, umplând nu întregul ecran, ci doar o dimensiune dată de o imagine sau un videoclip la dimensiune completă. Pe ecranele mari, această abordare este de înțeles; interacțiunea cu pagina rămâne posibilă. Pe micile ecrane ale dispozitivelor mobile, tot acest design inovator se transformă fără probleme într-o „lightbox” clasică. Ideea este interesantă, uită-te la demo, poate cineva va adăuga o asemenea creativitate.

Dependenta: jQuery
Suport pentru browser: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ și Android 3+
Licență: Licență Creative Commons BY-NC-ND 3.0

14.Strat de lumină

Un plugin lightbox ușor de utilizat, care merge bine cu orice proiect și, de asemenea, arată bine pe orice ecran. Pluginul LightLayer oferă control asupra multor setări, cum ar fi schimbarea culorii de fundal și a gradului de transparență, poziția blocului de bază, alegerea efectelor de tranziție la deschidere/închidere, funcții pe care utilizatorii le pot manipula independent. Plugin-ul funcționează excelent cu conținut extern de site-uri web, playere video încorporate și hărți.

Dependenta: jQuery
Suport pentru browser: IE9+, Chrome, Firefox, Safari și Opera
Licență: licență MIT

15. FluidBox

Fluidbox este un plugin lightbox exclusiv pentru imagini. Numărul de variații posibile în prezentarea imaginii este cu adevărat impresionant. Plugin-ul funcționează excelent cu imagini în diferite modele, inclusiv imagini plutitoare, imagini cu poziționare absolută, imagini și fotografii înrămate și indentate, cu imagini unice și combinate într-o galerie. În general, este o pierdere de timp, încă nu este posibil să descrii toate capacitățile pluginului într-o scurtă prezentare, așa că este mai bine să urmărești demo-ul, să îl răsuciți, să îl întoarceți și cred că multor oameni le va plăcea acest plugin .

Dependenta: jQuery
Suport pentru browser: IE9+, Chrome, Firefox, Safari, Opera
Licență: licență MIT

Probabil asta e tot! Sper ca acesta scurtă recenzie, vă va ajuta să înțelegeți mulțimea de produse de dezvoltare web oferite. Aș dori să menționez că nu am folosit toate pluginurile prezentate în selecție pe proiecte de lucru; majoritatea le-am testat pe site-uri de testare sau la atelier, așa că, dacă apar întrebări, cel mai probabil le vom rezolva împreună și împreună, ca întotdeauna Vom reuși.

Căutați un șablon rusesc potrivit pentru scopurile dvs.? În acest caz, probabil că ar trebui să vizitați piața TemplateMonster. Din simplul motiv că a apărut destul de recent site-ul noua sectiuneșabloane Acum fiecare utilizator se poate familiariza cu colecția, care va fi actualizată și actualizată. Textele pentru șabloane au fost scrise de mână. Dar acesta nu este singurul avantaj al datelor. soluții gata făcute. La urma urmei, în pachetele lor puteți găsi tot ceea ce vă va ușura munca la dezvoltarea unui proiect online, inclusiv un editor vizual.

Cu tot respectul, Andrew

1. Galeria jQuery cu efect de întoarcere a paginii

O soluție similară poate fi folosită pentru a afișa cele mai recente articole de blog sau pentru a prezenta produse.

O modalitate unică de a-ți afișa fotografiile într-o galerie jQuery elegantă.

3. Galeria de imagini jQuery pentru un produs, plugin „slideJS”.

Pluginul jQuery este perfect pentru implementarea unei pagini de produs cu mai multe imagini. Tranziția între imagini se poate face folosind miniaturi sau folosind săgețile de navigare.

Imaginea se mărește când treceți mouse-ul peste ea.

5. Galeria elegantă Lightbox „ppGallery”

6. jQuery Touch-Gallery

7. Noua galerie jQuery cu miniaturi

Galeria profesională jQuery 2011.

8. Plugin jQuery „Nivo Zoom”

Un alt plugin jQuery de înaltă calitate de la dezvoltatorii Nivo slider. Măriți imaginea făcând clic pe miniatură.

9. jQuery 3d Wall Gallery

JQuery nou galerie 2011. Fluxul de imagini se întinde pe toată lățimea ecranului. Puteți naviga între fotografii în trei moduri: folosind rotița mouse-ului, derulând în partea de sus a galeriei și folosind blocul de miniaturi din partea de jos. Galeria arată foarte impresionantă.

Imaginile din galerie sunt mărite aleatoriu și reduse din nou, creând un efect de bule.

11. Afișare neobișnuită a imaginilor în galeria jQuery

Folosind cursorul din partea de sus, puteți modifica distanța dintre imaginile din stivă. Când faceți clic pe o imagine, aceasta se rotește.

12. Plugin pentru galerie jQuery „MB.Gallery”

13. Galeria jQuery care se întinde pentru a umple întregul ecran

Plugin din 2011. O nouă galerie cu descrieri de imagini, care se întinde pe întreaga zonă a ferestrei browserului, indiferent de dimensiunea acesteia. Miniaturile imaginilor sunt implementate în mod interesant. Tranziția între fotografii se realizează folosind săgețile de lângă miniatură și folosind rotița mouse-ului.

14. Galerie jQuery ușoară

Pluginul scanează automat folderul și creează copii mici ale imaginilor.

16. Galerie elegantă folosind bibliotecile jQuery și Raphael

Un efect interesant când treceți mouse-ul peste o miniatură.

17. Noua versiune a pluginului jQuery „Supersized” versiunea 3.1

Destul de recent am menționat deja această soluție jQuery pentru crearea de galerii pe ecran complet. Astăzi vreau să vă prezint ultima versiune acest plugin profesional. Scenariul a fost complet rescris, acum galeria funcționează și mai repede, și au fost adăugate câteva setări interesante, de exemplu, navigarea folosind tastatura, viteza variabilă de modificare a imaginilor, dimensiunea ecranului și altele.

18. Plugin jQuery „Galleria 1.2.2”

Noua galerie jQuery pentru proiectele tale.

Galeria apare pe pagină când apăsați un buton. În jurul imaginii mărite apar miniaturi. Puteți controla schimbarea automată a imaginilor. Tehnologii utilizate: jQuery, CSS, PHP.

20. Plugin „Galeria Timer”

Galeria jQuery. S-a implementat schimbarea automată a diapozitivelor și derularea miniaturilor dacă sunt prea multe.

Plugin pentru galerie de imagini folosind jQuery.

22. galerie javascript pentru vizualizare pe dispozitive mobile „PhotoSwipe”

O galerie de imagini optimizată pentru vizualizare pe dispozitive mobile (telefoane sau tablete).

23. galerie javascript cu efect 3D

24. Galeria jQuery morphing

Nou Slider jQuery. Mai multe efecte animate grozave la schimbarea diapozitivelor.

25. Plugin jQuery „Galleria 1.2.3”

26. Galeria de imagini jQuery „Image Wall”

O galerie originală sub formă de miniaturi de diferite dimensiuni împrăștiate pe ecran, stilizate ca tablouri. Când faceți clic pe miniatură, apare o zonă cu o descriere a imaginii și când faceți din nou clic, apare imaginea mare originală.

27. Galeria CSS3

Interesant efect de hover.

28. Galerie cu miniaturi „TN3 Gallery”

jQyery galerie cu miniaturi. A fost implementată capacitatea de a vizualiza într-o fereastră compactă și într-o fereastră pe ecran complet, precum și capacitatea de a dezactiva/activa schimbarea automată a diapozitivelor.

29. Grilă de imagini „Grilă-Galerie”

Grila de imagini este întinsă în funcție de lățimea ferestrei browserului. Un efect de hover interesant: rândul și coloana active sunt evidențiate.

30. Galeria jQuery Swap

Galerie jQuery ușoară în câteva rânduri de cod.

Pagina demo prezintă mai multe opțiuni pentru mega meniuri drop-down, în diferite stiluri. În acest meniu puteți configura: efectul de renunțare, viteza de renunțare și, de asemenea, puteți alege între o renunțare făcând clic sau trecând mouse-ul peste un articol.

31. Galeria de imagini jQuery

Galeria jQuery cu legende de imagini. Mai multe efecte de tranziție de diapozitive. Navigarea între imagini se realizează fie folosind săgeți, fie făcând clic pe miniatură.

Imaginea și miniaturile sale sunt realizate sub formă de cercuri.

33. Pluginul de portofoliu al fotografului jQuery „Navigarea imaginilor în portofoliu”

Original soluție javascript pentru proiectarea portofoliului unui fotograf. Navigarea între imagini se realizează folosind săgețile Sus/Stânga/Dreapta și folosind mini-pătrate (imitarea mișcării în spațiul 2D). Puteți grupa fotografii din diferite sesiuni foto în diferite rânduri verticale și puteți naviga prin ele folosind elemente de navigare. Urmărește demonstrația.

34. Plugin „jmFullZoom”

Plugin pentru vizualizarea imaginilor care se întind pe întreaga dimensiune a ferestrei browserului. Poate fi folosit pentru a afișa lucrări dintr-un portofoliu.

35. Cartelă foto

Galeria integrată cu harta Google. Îl puteți extinde la ecran complet făcând clic pe pictograma din colțul din dreapta jos. Perfect pentru site-urile de călătorie.

36. Galerie de imagini cu miniaturi

Galeria jQuery cu miniaturi.

37. Galeria jQuery „Galleriffic”

Prezentare de diapozitive cu miniaturi.

38. Pluginul jQuery CSS3 „Efect de afișare unde”

Prezentare ondulată a imaginilor și a conținutului pe o pagină. Când faceți clic pe o miniatură, toate imaginile sunt mărite și apar numele lor. Când apăsați din nou, se deschide un bloc cu o descriere a fotografiei.

Multe opțiuni de afișare și setări.

42. Plogger

43. O galerie simplă, drăguță, realizată cu CSS, fără a folosi scripturi

Arată frumos și funcționează grozav în toate browserele moderne

Puteți controla prezentarea automată de diapozitive (pornire/oprire), comuta diapozitive folosind săgețile de la tastatură, paginarea automată a titlurilor diapozitivelor dacă există multe dintre ele, acceptă mai multe galerii pe o singură pagină, subtitrări pentru diapozitive, suport API și posibilitatea de a crea propriile dvs. efecte de tranziție de diapozitiv

46. Galerie sub forma unui teanc de fotografii

Așa ar trebui să arate rezultatul galeriei pe care o vom crea. Puteți urmări demo și, dacă doriți, descărcați rezultatul final al galeriei.

În acest tutorial vă voi arăta cum să creați un minimalist, dar în același timp convenabil și funcțional galerie foto pe jQuery, sau o galerie de imagini, după cum doriți. Galeria are capacitatea de a crea categorii, urmate de filtrare. De asemenea, este posibil să lansați o prezentare de diapozitive. Galeria funcționează în toate browserele, așa că nu vor fi probleme de adaptare.

Două biblioteci gratuite vor fi folosite pentru a crea această galerie JQuery: nisipuri mișcătoareȘi Fotografie draguta. Ele fac crearea unei galerii mult mai ușoară. Ca întotdeauna, puteți vedea rezultatul muncii pe pagina demo și, de asemenea, puteți descărca arhiva din galeria de lucru și gata fișiere sursă. Singurul dezavantaj, ca să spunem așa, este crearea manuală a miniaturilor pentru imagini mari. Și în orice altceva asta Galerie demn de atentie.

SURSE

Marcaj HTML

Mai întâi, să ne uităm la panoul cu o listă de categorii, aceasta este listă cu puncte ul. Mai mult, fiecare element de listă trebuie să aibă un nume de clasă unic.

Categorii:

Toate

Categoria 1

Categoria 2

Categoria 3

Categoria 4

Numele imaginii

După cum am menționat mai sus, elementele din listă sunt imagini din galerie. Fiecare element de listă include componente. Aceasta este imaginea în sine, sau mai degrabă miniatura ei, precum și o descriere. Miniatura este un link către imaginea principală. Atributul rel este necesar pentru a apela javascript și a deschide imaginea principală.

Nu uitați și de 2 lucruri importante: elementul li list trebuie să aibă un atribut unic data-id. Atributul data-type conține clasa categorie, a cărei listă am descris-o mai sus. Totul pare să fie legat de marcaj.

Stiluri CSS

Nu mă voi concentra în mod special pe stiluri, deoarece folosim o bibliotecă gata făcută Fotografie draguta, care este responsabil pentru mărirea imaginii, și cod css suficient. Cu toate acestea, merită remarcat faptul că există 5 opțiuni pentru proiectarea unei imagini mărite, deși în mod ideal doar 3, deoarece în două opțiuni este eliminată doar rotunjirea.

Prin urmare, voi arăta doar Stiluri CSS pentru miniaturi și o listă de categorii.

Portofoliu-categ ( margin-bottom:30px; )
.portfolio-categli (
display:inline;
margine-dreapta:10px;
}
.bloc-imagine(
display:bloc;
poziție: relativă;
}
.image-block img (
chenar: 1px solid #d5d5d5;
chenar-rază: 4px 4px 4px 4px;
fundal:#FFFFFF;
umplutură: 10px;
}
.image-block img:hover (
chenar: 1px solid #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li (
plutește la stânga;
marjă: 0 12px 20px 0;
preaplin: ascuns;
latime: 245px;
umplutură: 5px;
}
.home-portfolio-text ( margin-top:10px; )
li.active a ( text-decoration:subliniere; )

În principiu, totul ar trebui să fie clar cu stiluri. Pentru a alinia categoriile, proprietatea de afișare este setată la inline . Pentru a da un efect de contur imaginii, setați culoarea de fundal (albă) și umplutura la 10 pixeli. Dimensiunile articolelor din listă sunt stabilite în .portfolio-area li .

jQuery

Și, în sfârșit, cel mai important lucru este pentru ce este toată lecția. Acesta este codul jQuery. Să începem prin a filtra imaginile după categorie.

// Selectează tot elemente copil portofoliu-area și scrieți-o într-o variabilă
var $date = $(".portfolio-area").clone();

$(".portfolio-categ li").click(function(e) (
$(".filter li").removeClass("activ");

Var filterClass=$(this).attr("clasa").split(" ").slice(-1);

Dacă (filterClass == „toate”) (
var $filteredData = $data.find(".portfolio-item2");
) altfel (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
durata: 600,
reglare înălțime: „auto”
), funcția () (

LightboxPhoto();
});
$(this).addClass(„activ”);
returnează fals;
});

Folosind metoda clone() și un selector, selectăm toate elementele copil din .portfolio-area și le scriem în variabila $data. În continuare, urmărim clicul pe una dintre categorii, elementul li al listei cu clasa .portfolio-categ . Facem inactive toate categoriile eliminând removeClass(„activ”), dacă acest lucru nu se face, atunci în timp toate categoriile vor fi active și filtrarea se va opri.

Din moment ce facem clic pe un element listă, acest selector conține un element list, adică li , din acesta luăm valoarea atributului class și folosind metoda split împărțim numele clasei în mai multe părți, chenarul este un spațiu (adică, dacă clasa a fost „toate active”, atunci după împărțire obținem o matrice de „toate” și „active”). Apoi, folosind metoda slice, selectăm primul element al matricei (în cazul nostru, „toate”) și scriem rezultatul rezultat în variabila filterClass. Dacă nu există spațiu, numele clasei nu se va schimba.

Apoi, verificăm dacă variabila filterClass conține șirul toate, apoi folosind metoda .find selectăm toate elementele cu clasa portfolio-item2 din matricea $data, pe care am considerat-o mai sus. Elementele selectate (și acestea sunt toate elementele listei, adică toate imaginile) sunt plasate în variabila filteredData.

În caz contrar, dacă filterClass nu este egal toate, atunci nu vom plasa toate elementele listei în variabila filterData, ci doar pe acelea al căror atribut data-type se potrivește cu clasa categoriei. Pe scurt, elemente dintr-o singură categorie.

Și în cele din urmă trecem variabila rezultată în bibliotecă jquery nisipuri mișcătoare, care filtrează imaginile. Asta e pentru filtrare.

Acum, în ceea ce privește mărirea imaginii în fereastra pop-up. Totul este mult mai simplu aici.

JQuery(„a”).prettyPhoto((
animationSpeed: „rapid”,
prezentare de diapozitive: 5000,
tema: "facebook",
show_title: fals,
overlay_gallery: false
});

Este urmărit un clic pe un link al cărui atribut rel începe cu prettyPhoto. Apoi intră în joc biblioteca fotografie draguta, iar imaginea se mărește ca prin minune. Apropo, trecem și mai mulți parametri. Cum ar fi viteza de animație este rapidă, întârzierea prezentării de diapozitive este de 5 secunde, tema de design Facebook (sunt 5 teme în total, acestea sunt situate în folderul imagini/prettyPhoto) și interzicem, de asemenea, afișarea numelui imaginii și mărirea imaginii când treceți mouse-ul.

În colecția noastră de scripturi puteți găsi pluginuri mici, dar foarte utile și funcționale pentru site-ul dvs. Revenind la mijloace jQueryGalerie, galerie ușor de organizat fotografii digitale cu un design frumos, cu capacitatea de a derula, mări, vizualiza miniaturi și multe altele funcții utile. Există atât soluții stricte pentru site-uri web profesionale, cât și luminoase cu animație și alte efecte speciale pentru proiecte de divertisment.

Prin mijloace Imagini jQuery poate fi vizualizat fără a reîncărca pagina și fără a crește fluxul de trafic. Pluginurile prezentate vă permit să optimizați încărcarea imaginilor în timp real și să prezentați galeria într-un mod convenabil și ușor de utilizat. Datorită ușurinței setărilor și multor soluții disponibile, propriile dvs galerie foto jQuery acum poți arăta exact așa cum vrei tu. Scripturile prezentate au fost testate pe diferite platforme și au o compatibilitate excelentă.

Salutare tuturor! În acest articol ne vom uita la, cum să faci o galerie frumoasă și ușor de sortat folosind JQuery.

O galerie frumoasă, ordonată convenabil este un lucru minunat pentru site-ul tău, care te va încânta pe tine și pe vizitatorii tăi. Astăzi ne vom uita la un plugin de bibliotecă foarte ușor de instalat și configurat JQuery– Filterizr.

În ciuda ușurinței de utilizare, pluginul este destul de ușor și eficient. Să aruncăm o privire mai atentă.

Demonstrație

Pentru a vedea cum funcționează pluginul, accesați site-ul oficial și iată-l în fața dvs.!

Puteți alege să sortați după oraș, natură, industrie, răsărit, apus sau să afișați toate fotografiile (implicit). Există un buton Amesteca, care vă va permite să amestecați imaginile. Butoane A.S.C.Și DESC sortați imaginile în ordine crescătoare și, respectiv, descrescătoare. Dacă doriți să găsiți o imagine după poziție sau descriere, selectați articolul dorit din lista derulantă și introduceți interogarea în câmpul de căutare. Când treceți mouse-ul peste imagine, imaginea trece de la alb-negru la culoare.

Instalare

Pentru a descărca biblioteca, faceți clic pe butonul Descarca sau utilizați NPM:

Npm instalează filterizr

Plugin-ul este deja configurat din cutie, dar dacă doriți să înlocuiți valorile implicite puteți:

1) Transmiteți un obiect cu parametri la constructor JQuery

Var filterizd = $(".filtr-container").filterizr((
// Opțiuni
})

2) Rescrieți parametrii folosind setOptions() metoda in obiect Filterizr.

Filterizd.filterizr("setOptions", (
// Opțiuni
})

Opțiuni

Parametri impliciti:

Opțiuni = (
animațieDurata: 0,5,
apeluri inverse: (
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
întârziere: 0,
delayMode: „progresiv”,
easing: „ease-out”,
filtru: "toate",
filterOutCss: (
opacitate: 0,
transformare: "scale(0.5)"
},
filterInCss: (
opacitate: 0,
transforma: „scale(1)”
},
aspect: „sameSize”,
selector: „.filtr-container”,
setupControls: adevărat
}

Mai mult instrucțiuni detaliate iar o descriere a fiecărui parametru poate fi găsită la