Képgaléria js-bélyegképekkel. Web tervezés és keresőoptimalizálás. jQuery galéria "Galleriffic"

Sokszor átnéztem különféle képgalériákat, és látványos diavetítések és bővítmények széles gyűjteményét gyűjtöttem össze. A Lightbox kizárólag CSS3-on is elérhető, további js-könyvtárak csatlakoztatása nélkül. De az idő nem áll meg, a felhasználók egyre gyakrabban használnak különféle mobileszközöket az internetezéshez, ami azt jelenti, hogy a webes elemek és különösen a „ ” effektusú fotógalériák adaptálhatósága válik az egyik olyan prioritássá, amelyre a webtervezőknek és a fejlesztőknek oda kell figyelniük. nak nek.

Bemutatok egy másik 15 adaptív válogatást jQuery bővítmény ov, amelyek az asztali böngészőkkel is barátságosak, és tökéletesen illeszkednek a különféle mobil eszközök (laptopok, okostelefonok, táblagépek stb.) képernyőjére.

Tekintse meg a bemutatót a fejlesztők webhelyein, töltse le a kívánt bővítményt, és hozzon létre, hozzon létre, hozzon létre...

1. iLightbox

iLightbox egy könnyű jQuery Lightbox beépülő modul, amely a következők széles körét támogatja különféle típusok fájlok: képek, videók, Flash/SWF, Ajax tartalom, keretek és beágyazott térképek. Ez a bővítmény gombokat is hozzáad közösségi hálózatok, amely lehetővé teszi a felhasználók számára, hogy tartalmakat osszanak meg a Facebookon, a Twitteren vagy a Redditen keresztül. Kiváló lehetőség látványos diavetítések, képgalériák és videók szervezésére, normál és teljes képernyős módban való megtekintéssel.

iLightbox elég gyorsan működik és ránézésre is mobil eszközök, több mint helyesen jeleníti meg a feldolgozott tartalmat. Többek között ennek a bővítménynek a használatával egyszerűen megvalósíthatja az információs blokkok megjelenítését, mint egy modális ablak.

Függőség: jQuery
Böngésző támogatás: IE7+, Chrome, Firefox, Safari és Opera
Engedély: Az ördög tudja)))

2. SwipeBox

Swipebox egy JQuery bővítmény támogatással érintőképernyők mobil platformok. A képek mellett a beépülő modul támogatja a Youtube és a Vimeo beágyazott videóit. A Swipebox nagyon könnyen csatlakoztatható bármely projekthez; a bővítmény számos intuitív opcióval rendelkezik a funkciók és a viselkedés testreszabásához. A fejlesztő weboldalán részletes dokumentáció található a plugin csatlakoztatásáról és használatáról, felesleges szöszmötölés nélkül, minden a lényeg, úgyhogy szerintem nem lesz nehéz kitalálni, hogy mit, hol és miért.

Függőség: jQuery
Böngésző támogatás: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android és Windows Phone
Engedély: Még nem döntöttem, talán szerencséd lesz)))

3.MagnificPopup

Egy régóta ismert és jól bevált lightbox bővítmény, amely jQuery vagy Zepto.js alapú. A bővítmény szerzője Dmitry Semenov, aki egyben a PhotoSwipe bővítmény fejlesztője is, amelyről alább szólok. JQuery/Zepto pluginként érkezik, több is van benne bőséges lehetőséget hiányzik a PhotoSwipe-ból, például videó támogatás, térképmegjelenítés és Ajax tartalommegvalósítás modális ablakok beépített formákkal. Minden kritérium szerint ez egy másik nagyszerű eszköz a webfejlesztők számára. Van egy külön beépülő modul a WordPresshez, valamint részletes dokumentáció a beállításról és a használatról. Az egyetlen lehangoló dolog az orosz nyelvű dokumentáció hiánya, a névből és vezetéknévből ítélve a szerző orosznak tűnik, soha nem értette, hogy ez káros-e, vagy a saját kifinomultságának képzeletbeli tudata miatt, de bla. Nos, oké, kinek kell kitalálnia, mi sem puhára főztük a teát))).

Függőség: jQuery 1.9.1+ vagy Zepto.js
Böngésző támogatás: IE7 (részben), IE8+, Chrome, Firefox, Safari és Opera
Engedély: MIT engedély

4.PhotoSwipe

Függőség: Javascript vagy jQuery
Böngésző támogatás
Engedély: MIT engedély

11.FeatherLight

Egy 6 kbit-es lightbox bővítmény többé-kevésbé hozzáértő fejlesztők számára, minden szükséges funkcióval felszerelve. Amellett, hogy támogatja az összes elterjedt tartalomtípust (szöveg, képek, iframe, Ajax), lehetőség van továbbiak csatlakoztatására, és saját fejlesztést is végezhet. natív kiterjesztés ehhez a beépülő modulhoz, amely teljes mértékben megfelel az Ön igényeinek új projekt létrehozásakor. Hogy ez az egész (bővítményfejlesztés) hogyan működik, azt nem nagyon néztem utána, de akik ezt a bővítményt telepítik, szerintem rájönnek))).

Függőség: jQuery
Böngésző támogatás: IE8+, Chrome, Firefox, Safari és Opera
Engedély: MIT engedély

12. Fénygaléria

LightGallery— egy többfunkciós lightbox plugin sok további jellemzők. Több mint 20 lehetőséggel rendelkezik a Lightbox legapróbb részleteinek testreszabásához. Itt minden van, nos, vagy majdnem minden)). Teljes képgaléria szépen elrendezett bélyegképekkel, navigációs elemekkel és bélyegképek görgetésével. Egyszerű HTML jelölés rendezetlen lista formájában

Kinézet

CSS használatával

LightGallery

Függőség: jQuery
Böngésző támogatás: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android és Windows Phone
Engedély: MIT engedély

13. StripJS

Szokatlan, akár azt is mondhatnám: a lightbox szokatlan megvalósítása, vagy inkább szokatlan tartalommegjelenítés, amikor a jobb oldalon megjelenik egy kép vagy videó a lightbox kialakításában, és nem a teljes képernyőt tölti ki, hanem csak egy adott méretben. teljes méretű kép vagy videó. Nagy képernyőkön ez a megközelítés érthető, az oldallal való interakció továbbra is lehetséges. A mobileszközök kis képernyőjén mindez az innovatív kialakítás simán átváltozik klasszikus „világítódobozba”. Az ötlet érdekes, nézd meg a demót, hátha valaki hozzáad ilyen kreativitást.

Függőség: jQuery
Böngésző támogatás: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ és Android 3+
Engedély: Creative Commons BY-NC-ND 3.0 licenc

14. Világos réteg

Egy könnyen használható átvilágítódoboz-bővítmény, amely jól illeszkedik minden projekthez, és jól mutat minden képernyőn. A LightLayer beépülő modul számos beállítás vezérlését biztosítja, például a háttérszín és az átlátszóság mértékének megváltoztatását, az alapblokk helyzetét, az átmeneti effektusok kiválasztását nyitás/záráskor, a felhasználók által önállóan kezelhető funkciókat. A beépülő modul kiválóan működik külső webhelytartalommal, beágyazott videolejátszókkal és térképekkel.

Függőség: jQuery
Böngésző támogatás: IE9+, Chrome, Firefox, Safari és Opera
Engedély: MIT engedély

15. FluidBox

A Fluidbox egy átvilágítódoboz-bővítmény, kizárólag képekhez. A képmegjelenítés lehetséges variációinak száma valóban lenyűgöző. A beépülő modul kiválóan működik különféle kialakítású képekkel, beleértve a lebegő képeket, az abszolút pozicionálású képeket, a keretezett és behúzott képeket és fényképeket, egyetlen képpel, valamint galériává kombinálva. Általánosságban elmondható, hogy időpocsékolás, még mindig nem lehet rövid prezentációban leírni a plugin összes képességét, ezért érdemesebb megnézni a demót, csavarni, megfordítani, és szerintem sokaknak tetszeni fog ez a plugin .

Függőség: jQuery
Böngésző támogatás: IE9+, Chrome, Firefox, Safari, Opera
Engedély: MIT engedély

Valószínűleg ennyi! Remélem ezt rövid áttekintés, segít megérteni a kínált webfejlesztési termékek rengetegét. Szeretném megjegyezni, hogy a válogatásban bemutatott beépülő modulok közül nem mindegyiket használtam működő projekteken, a legtöbbjüket tesztoldalakon vagy a workshopon teszteltem, így ha bármilyen kérdés merülne fel, azt nagy valószínűséggel közösen megoldjuk, ill. együtt, mint mindig Sikerülni fogunk.

Céljainak megfelelő orosz sablont keres? Ebben az esetben valószínűleg fel kell keresnie a TemplateMonster piacteret. Azon egyszerű oknál fogva, hogy az oldal nemrég jelent meg új szakasz sablonokat Mostantól minden felhasználó megismerheti a gyűjteményt, amely folyamatosan frissül és frissül. A sablonok szövegét kézzel írták. De nem ez az egyetlen előnye az adatoknak. kész megoldások. Csomagjukban ugyanis mindent megtalálhat, ami megkönnyíti az online projektek fejlesztését, beleértve a vizuális szerkesztőt is.

Minden tisztelettel, Andrew

1. jQuery galéria lapfordító hatással

Hasonló megoldással a legfrissebb blogcikkeket is megjeleníthetjük, vagy termékeket mutathatunk be.

Egyedülálló módja annak, hogy fotóit megjelenítse egy díszes jQuery galériában.

3. jQuery képgaléria egy termékhez, „slideJS” bővítmény

A jQuery beépülő modul tökéletes egy több képet tartalmazó termékoldal megvalósításához. A képek közötti átmenet miniatűrök vagy navigációs nyilak segítségével történhet.

A kép megnagyobbodik, ha fölé viszi az egeret.

5. Elegáns átvilágítódoboz-galéria „ppGallery”

6. jQuery Touch-Gallery

7. Új jQuery galéria miniatűrökkel

Professzionális jQuery galéria 2011.

8. jQuery plugin „Nivo Zoom”

Egy másik kiváló minőségű jQuery plugin a Nivo slider fejlesztőitől. Nagyítsd fel a képet a miniatűrre kattintva.

9. jQuery 3d fali galéria

Új jQuery galéria 2011. A képek betáplálása a képernyő teljes szélességére kiterjed. Háromféleképpen navigálhat a fotók között: az egérgörgővel, a galéria tetején görgetve és az alján található miniatűr blokk használatával. A galéria nagyon lenyűgözőnek tűnik.

A galéria képei véletlenszerűen nagyításra és kicsinyítésre kerülnek, így buborékhatás jön létre.

11. Szokatlan képek megjelenítése a jQuery galériában

A tetején lévő csúszkával módosíthatja a halmban lévő képek közötti távolságot. Ha rákattint egy képre, az elfordul.

12. jQuery galéria bővítmény „MB.Gallery”

13. jQuery galéria, amely a teljes képernyőt kitölti

Plugin 2011-ből. Egy új galéria képek leírásával, amely a böngészőablak teljes területén kiterjed, méretétől függetlenül. A képek miniatűrjei érdekesen vannak megvalósítva. A fotók közötti átmenet a bélyegkép melletti nyilak és az egérgörgő segítségével történik.

14. Könnyű jQuery galéria

A beépülő modul automatikusan átvizsgálja a mappát, és kis másolatokat készít a képekről.

16. Stílusos galéria a jQuery és Raphael könyvtárak használatával

Érdekes hatás, ha az egeret egy miniatűr fölé viszi.

17. A jQuery bővítmény „Supersized” új verziója, 3.1

Nemrég már említettem ezt a jQuery megoldást teljes képernyős galériák létrehozására. Ma szeretném bemutatni nektek legújabb verzió ezt a professzionális bővítményt. A forgatókönyvet teljesen átírták, most a galéria még gyorsabban működik, és néhány érdekes beállítás is hozzáadásra került, például a billentyűzet segítségével történő navigáció, a változó képváltási sebesség, a képernyő mérete és egyebek.

18. „Galleria 1.2.2” jQuery bővítmény

Új jQuery galéria projektjeihez.

A galéria megjelenik az oldalon, ha megnyom egy gombot. A kinagyított kép körül miniatűrök jelennek meg. Szabályozhatja a képek automatikus váltását. Felhasznált technológiák: jQuery, CSS, PHP.

20. „Timer Gallery” beépülő modul

jQuery galéria. Megvalósult a diák automatikus váltása és a miniatűrök görgetése, ha túl sok van belőlük.

Képgaléria bővítmény a jQuery használatával.

22. javascript galéria mobileszközökön való megtekintéshez „PhotoSwipe”

Mobileszközökön (telefonon vagy táblagépen) való megtekintésre optimalizált képgaléria.

23. javascript galéria 3D hatással

24. jQuery morphing galéria

Új jQuery csúszka. Számos klassz animációs effektus diák váltásakor.

25. „Galleria 1.2.3” jQuery bővítmény

26. jQuery képgaléria „Képfal”

Eredeti galéria különböző méretű miniatúrák formájában, a képernyőn szétszórva, festményként stilizálva. Ha rákattint a miniatűrre, megjelenik egy terület a kép leírásával, és ha ismét rákattint, az eredeti nagy kép ugrik fel.

27. CSS3 galéria

Érdekes lebegő hatás.

28. Galéria miniatűrökkel „TN3 Galéria”

jQyery galéria miniatűrökkel. Megvalósult a kompakt ablakban és a teljes képernyős ablakban való megtekintés lehetősége, valamint az automatikus diaváltás letiltása/engedélyezése.

29. Képrács „Rács-galéria”

A képrács a böngészőablak szélességétől függően megnyúlik. Érdekes hover effektus: az aktív sor és oszlop kiemelve.

30. jQuery Swap Gallery

Könnyű jQuery galéria néhány soros kóddal.

A demóoldal számos lehetőséget kínál a legördülő mega menükhöz, különböző stílusokban. Ebben a menüben konfigurálható: a kiesési effektus, a lemorzsolódás sebessége, valamint a lemorzsolódás között is választhat, ha rákattint vagy az egeret egy elem fölé viszi.

31. jQuery Képgaléria

jQuery galéria képaláírásokkal. Számos diaátmenet effektus. A képek között a nyilak segítségével vagy a miniatűrre kattintva lehet navigálni.

A kép és miniatúrái körök formájában készülnek.

33. A jQuery fotós portfólióbővítménye „Portfolio Image Navigation”

Eredeti javascript megoldás fotós portfólió megtervezéséhez. A képek közötti navigáció a Fel/Bal/Jobb nyilakkal és mini-négyzetekkel (a mozgás utánzása a 2D térben) történik. A különböző fotózásokon készült fényképeket különböző függőleges sorokba csoportosíthatja, és navigációs elemek segítségével navigálhat rajtuk. Nézze meg a demót.

34. „jmFullZoom” beépülő modul

Beépülő modul a böngészőablak teljes méretére kiterjedő képek megtekintéséhez. Portfólió alkotásainak megjelenítésére használható.

35. Fényképkártya

Galéria integrálva Google Térkép. A jobb alsó sarokban lévő ikonra kattintva teljes képernyőre bővítheti. Ideális utazási weboldalakhoz.

36. Képgaléria miniatűrökkel

jQuery galéria miniatűrökkel.

37. jQuery galéria „Galleriffic”

Diavetítés miniatűrökkel.

38. jQuery CSS3 plugin „Wave Display Effect”

Képek és tartalom hullámszerű megjelenítése egy oldalon. Ha rákattint egy miniatűrre, az összes kép kinagyítja, és megjelenik a neve. Ha újra megnyomja, megnyílik egy blokk a fénykép leírásával.

Számos megjelenítési lehetőség és beállítás.

42. Plogger

43. Egy egyszerű, aranyos galéria CSS-sel, szkriptek használata nélkül

Gyönyörűen néz ki, és minden modern böngészőben remekül működik

Vezérelheti az automatikus diavetítést (start/stop), diaváltást a billentyűzet nyilakkal, a diacímek automatikus oldalszámozását, ha sok van belőlük, támogatja több galériát egy oldalon, feliratozást a diákhoz, API támogatást és saját létrehozásának lehetőségét. diaátmenet effektusok

46. Galéria egy köteg fotó formájában

Így kell kinéznie az általunk elkészített galéria eredményének. Megtekintheti a demót, és ha szeretné, letöltheti a galéria végeredményét.

Ebben az oktatóanyagban megmutatom, hogyan készíthetsz minimalista, de ugyanakkor kényelmes és funkcionális stílust képgaléria a jQuery-n, vagy egy képgalériát, ahogy szeretné. A galériában lehetőség van kategóriák létrehozására, majd szűrésre. Lehetőség van diavetítés indítására is. A galéria minden böngészőben működik, így nem lesz probléma az adaptációval.

A galéria létrehozásához két ingyenes könyvtárat fogunk használni JQuery: QuicksandÉs PrettyPhoto. Sokkal könnyebbé teszik a galéria létrehozását. Mint mindig, most is megtekintheti a munka eredményét a bemutató oldalon, és letöltheti az archívumot a munkagalériából, és kész forrás fájlok. Az egyetlen hátrány, hogy úgy mondjam, a bélyegképek manuális létrehozása nagy képekhez. És ebben minden másban Képtár figyelemre méltó.

FORRÁSOK

HTML jelölés

Először is nézzük meg a panelt a kategóriák listájával, ez az pontozott lista ul. Ezenkívül minden listaelemnek egyedi osztálynévvel kell rendelkeznie.

Kategóriák:

Minden

1. kategória

2. kategória

3. kategória

4. kategória

A kép neve

Mint fentebb említettük, a listaelemek a galériában található képek. Minden listaelem tartalmaz összetevőket. Ez maga a kép, vagy inkább annak miniatűrje, valamint egy leírás. A miniatűr a fő képre mutató hivatkozás. A rel attribútum szükséges a javascript meghívásához és a fő kép megnyitásához.

Ne feledkezzünk meg 2 fontos dologról sem: a li list elemnek egyedi data-id attribútummal kell rendelkeznie. A data-type attribútum tartalmazza a kategória osztályt, melynek listáját fentebb leírtam. Úgy tűnik, minden a jelölésről szól.

CSS stílusok

Nem fogok különösebben a stílusokra koncentrálni, mivel egy kész könyvtárat használunk PrettyPhoto, amely a kép nagyításáért felelős, és css kódot elég. Érdemes azonban megjegyezni, hogy 5 lehetőség van a kinagyított kép megtervezésére, bár ideális esetben csak 3, mivel két lehetőségnél csak a kerekítést távolítják el.

Ezért csak megmutatom CSS stílusok bélyegképekhez és kategóriák listájához.

Portfólió-kategória ( margó-alsó: 30 képpont; )
.portfolio-categli (
display:inline;
margó-jobb:10px;
}
.image-block(
display:block;
pozíció: relatív;
}
.image-block img (
keret: 1px tömör #d5d5d5;
border-radius: 4px 4px 4px 4px;
háttér:#FFFFFF;
padding:10px;
}
.image-block img:hover (
keret: 1px tömör #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li (
balra lebeg;
margó: 0 12px 20px 0;
túlcsordulás: rejtett;
szélesség: 245 képpont;
padding:5px;
}
.home-portfolio-text ( margin-top:10px; )
li.active a ( text-decoration:underline; )

Elvileg mindennek világosnak kell lennie a stílusokkal. A kategóriák sorba rendezéséhez a megjelenítési tulajdonság inline értékre van állítva. Ahhoz, hogy a kép körvonala legyen, állítsa a háttérszínt (fehér) és a kitöltést 10 képpontra. A listaelemek méretei a .portfolio-area li értékben vannak beállítva.

jQuery

És végül az a legfontosabb, hogy mire való az egész lecke. Ez a jQuery kód. Kezdjük a képek kategóriák szerinti szűrésével.

// Mindet kiválaszt gyermek elemek portfólió-területet, és írja be egy változóba
var $adat = $(".portfólió-terület").clone();

$(".portfolio-categ li").click(function(e) (
$(.filter li").removeClass("aktív");

Var filterClass=$(this).attr("osztály").split(" ").slice(-1);

If (filterClass == "all") (
var $filteredData = $data.find(.portfolio-item2");
) más (
var $filteredData = $data.find(.portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
időtartam: 600,
magasság beállítása: "auto"
), függvény () (

LightboxPhoto();
});
$(this).addClass("aktív");
return false;
});

A clone() metódus és egy szelektor segítségével kijelöljük a .portfolio-area összes gyermekelemét, és beírjuk a $data változóba. Ezután követjük a kattintást az egyik kategóriára, a lista li elemére a .portfolio-categ osztállyal. Minden kategóriát inaktívvá teszünk a removeClass(“aktív”) eltávolításával, ha ez nem történik meg, idővel minden kategória aktív lesz, és a szűrés leáll.

Mivel egy listaelemre kattintunk, ez a választó tartalmaz egy lista elemet, vagyis a li -t, ebből vesszük ki az osztály attribútum értékét és a split metódussal több részre bontjuk az osztály nevét, a szegély egy szóköz (vagyis ha az osztály "minden aktív" volt, akkor a felosztás után egy "összes" és "aktív" tömböt kapunk). Ezután a slice módszerrel kiválasztjuk a tömb első elemét (esetünkben az „összes”), és a kapott eredményt a filterClass változóba írjuk. Ha nincs szóköz, az osztály neve nem változik.

Ezután ellenőrizzük, hogy a filterClass változó tartalmazza-e a karakterláncot minden, majd a .find metódussal kijelöljük az összes portfolio-item2 osztályú elemet a $data tömbből, amit fentebb megvizsgáltunk. A kiválasztott elemek (és ezek mind a lista elemei, vagyis az összes kép) a filteredData változóba kerülnek.

Ellenkező esetben, ha a filterClass nem egyenlő minden, akkor a filterData változóba nem helyezzük el a lista minden elemét, hanem csak azokat, amelyek adattípus attribútuma megegyezik a kategória osztályával. Röviden, csak egy kategória elemei.

És végül átadjuk a kapott változót a könyvtárnak jquery futóhomok, amely szűri a képeket. Ennyi a szűréshez.

Most, ami a kép nagyítását illeti a felugró ablakban. Itt minden sokkal egyszerűbb.

JQuery("a").prettyPhoto((
animációs sebesség: "gyors",
diavetítés: 5000,
téma: "facebook",
show_title: false,
overlay_gallery: false
});

A rendszer nyomon követi az olyan hivatkozásra történő kattintást, amelynek rel attribútuma a prettyPhoto karakterrel kezdődik. Ezután a könyvtár lép játékba szépPhoto, és a kép csodálatos módon megnagyobbodik. Egyébként több paramétert is átadunk. Ilyen például az animáció gyorsasága, a diavetítés késleltetése 5 másodperc, a Facebook-design téma (összesen 5 téma van, ezek a képek/prettyPhoto mappában találhatók), valamint tiltjuk a kép nevének megjelenítését, ill. a kép nagyítása az egér lebegtetése közben.

Szkriptgyűjteményünkben apró, de nagyon hasznos és funkcionális bővítményeket találhat webhelyéhez. Az eszközökre térve jQueryKéptár, könnyen rendezhető galéria digitális fényképek szép kialakítással, görgetéssel, nagyítással, miniatűrök megtekintésével és sok más lehetőséggel hasznos funkciókat. Léteznek szigorú megoldások a professzionális weboldalakhoz, és világosak animációval és egyéb speciális effektusokkal szórakoztató projektekhez.

Útján jQuery képek megtekinthető az oldal újratöltése és a forgalom növelése nélkül. A bemutatott bővítmények lehetővé teszik a képek valós idejű betöltésének optimalizálását és a galéria kényelmes és felhasználóbarát bemutatását. Köszönhetően a könnyű beállításnak és a számos elérhető megoldásnak, a saját jQuery fotógaléria most pontosan úgy nézhet ki, ahogy szeretné. A bemutatott szkripteket különböző platformokon tesztelték, és kiváló kompatibilitásuk van.

Sziasztok! Ebben a cikkben megvizsgáljuk, hogyan készítsünk gyönyörű és kényelmesen rendezhető galériát a JQuery segítségével.

Egy gyönyörű, kényelmesen rendezett galéria csodálatos dolog az Ön webhelye számára, amely örömet okoz Önnek és látogatóinak. Ma egy nagyon könnyen telepíthető és konfigurálható könyvtári bővítményt fogunk megnézni JQuery– Filterizr.

A könnyű használat ellenére a bővítmény meglehetősen könnyű és hatékony. Nézzük meg közelebbről.

Demonstráció

A plugin működésének megtekintéséhez látogasson el a hivatalos webhelyre, és itt van Ön előtt!

Választhat, hogy város, természet, iparág, napkelte, naplemente szerint rendezi-e a rendezést, vagy megjelenítse az összes fényképet (alapértelmezett). Van egy gomb Keverés, amely lehetővé teszi a képek keverését. Gombok A.S.C.És DESC rendezze a képeket növekvő, illetve csökkenő sorrendbe. Ha pozíció vagy leírás alapján szeretne képet találni, válassza ki a kívánt elemet a legördülő listából, és írja be a lekérdezést a keresőmezőbe. Ha az egeret a kép fölé viszi, a kép fekete-fehérből színessé válik.

Telepítés

A könyvtár letöltéséhez kattintson a gombra Letöltés vagy használja NPM:

Npm telepítse a filterizr-t

A beépülő modul már gyárilag be van állítva, de ha felül akarja írni az alapértelmezett beállításokat, akkor a következőket teheti:

1) Adjon át egy objektumot paraméterekkel a konstruktornak JQuery

Var filterizd = $(".filtr-container").filterizr((
// lehetőségek
})

2) Írja át a paramétereket a segítségével setOptions() módszer az objektumban Filterizr.

Filterizd.filterizr("setOptions", (
// lehetőségek
})

Lehetőségek

Alapértelmezett paraméterek:

Opciók = (
animációIdőtartam: 0,5,
visszahívások:(
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
késés: 0,
delayMode: "progresszív",
könnyítés: "könnyítés",
szűrő: "mind",
filterOutCss: (
átlátszatlanság: 0,
transzformáció: "scale(0.5)"
},
filterInCss: (
átlátszatlanság: 0,
transzformáció: "skála(1)"
},
elrendezés: "sameSize",
választó: ".filtr-container",
setupControls: igaz
}

Több részletes utasításokatés az egyes paraméterek leírása a címen található