Galerija slika s js sličicama. Web dizajn i optimizacija za tražilice. jQuery galerija "Galleriffic"

22.07.2020 Sigurnost

Mnogo sam puta pregledao razne galerije slika i prikupio opsežnu zbirku spektakularnih dijaprojekcija i dodataka. Lightbox je također dostupan isključivo na CSS3, bez povezivanja dodatnih js biblioteka. No, vrijeme ne stoji, korisnici sve više koriste razne mobilne uređaje za surfanje internetom, što znači da prilagodljivost web elemenata, a posebice fotogalerija s “ ” efektom postaje jedan od prioriteta na koje web dizajneri i programeri trebaju obratiti pozornost. do.

Predstavljam još jedan izbor od 15 adaptivnih jQuery dodatak ov, koji su prijateljski nastrojeni s preglednicima stolnih računala i savršeno se uklapaju u zaslone raznih mobilnih uređaja (prijenosna računala, pametni telefoni, tableti itd.).

Pogledajte demo na web stranicama programera, preuzmite dodatak koji vam se sviđa i stvarajte, stvarajte, stvarajte...

1. iLightbox

iLightbox je lagani jQuery Lightbox dodatak s podrškom za širok raspon različite vrste datoteke: slike, video zapisi, Flash/SWF, Ajax sadržaj, okviri i ugrađene karte. Ovaj dodatak također dodaje gumbe društvene mreže, koji korisnicima omogućuje dijeljenje sadržaja putem Facebooka, Twittera ili Reddita. Izvrsna prilika za organiziranje spektakularnih projekcija slajdova, galerija slika i videa, uz gledanje u normalnom i cijelom zaslonu.

iLightbox radi prilično brzo i kada se gleda na Mobilni uredaji, više nego korektno prikazuje obrađen sadržaj. Između ostalog, pomoću ovog dodatka možete jednostavno implementirati prikaz blokova informacija poput modalnog prozora.

  • Ovisnost: jQuery
  • Podrška za preglednik: IE7+, Chrome, Firefox, Safari i Opera
  • Licenca: Vrag zna)))

2. SwipeBox

Swipebox je JQuery dodatak s podrškom ekrani osjetljivi na dodir mobilne platforme. Osim slika, dodatak podržava ugrađene videozapise s Youtubea i Vimea. Swipebox je vrlo lako priključiti na bilo koji projekt; dodatak ima nekoliko intuitivnih opcija za prilagodbu njegove funkcionalnosti i ponašanja. Na web stranici programera nalazi se detaljna dokumentacija o povezivanju i korištenju dodatka, bez nepotrebnog zezanja, sve je točno, tako da mislim da neće biti teško shvatiti što, gdje i zašto.

  • Ovisnost: jQuery
  • Podrška za preglednik: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android i Windows Phone
  • Licenca: Nisam odlučio, možda ćeš imati sreće)))

3.MagnificPopup

Dugo poznati i dobro dokazani dodatak za svjetlosni okvir temeljen na jQuery ili Zepto.js. Autor dodatka je Dmitry Semenov, koji je također programer dodatka PhotoSwipe, o kojem ću govoriti u nastavku. Dolazi kao jQuery/Zepto dodatak, ima više dovoljno mogućnosti nedostaju u PhotoSwipeu, kao što su video podrška, prikaz karte i implementacija Ajax sadržaja modalni prozori s ugrađenim obrascima. Po svim kriterijima, ovo je još jedan odličan alat za web programere. Postoji zaseban dodatak za WordPress i detaljna dokumentacija o postavljanju i korištenju. Jedina depresivna stvar je nedostatak dokumentacije na ruskom, sudeći po imenu i prezimenu, autor je izgleda Rus, nikad nije shvatio da li je to štetno, ili zbog umišljene svijesti o vlastitoj sofisticiranosti, ali bljak. Pa, dobro, tko to treba shvatiti, također nismo kuhali čaj meko kuhan))).

  • Ovisnost: jQuery 1.9.1+ ili Zepto.js
  • Podrška za preglednik: IE7 (djelomično), IE8+, Chrome, Firefox, Safari i Opera
  • Licenca: MIT licenca

4.PhotoSwipe

  • Ovisnost: Javascript ili jQuery
  • Podrška za preglednik
  • Licenca: MIT licenca

11.FeatherLight

6 kbit lightbox dodatak za više ili manje pametne programere, opremljen svim najpotrebnijim funkcijama. Osim što podržava sve uobičajene vrste sadržaja (tekst, slike, iframe, Ajax), postoji mogućnost povezivanja dodatnih, a možete i razviti vlastiti nativno proširenje za ovaj dodatak, koji će u potpunosti zadovoljiti vaše potrebe prilikom izrade novog projekta. Kako cijela ta stvar (razvoj proširenja) funkcionira, nisam baš istražio, ali oni koji instaliraju ovaj dodatak, mislim da će shvatiti))).

  • Ovisnost: jQuery
  • Podrška za preglednik: IE8+, Chrome, Firefox, Safari i Opera
  • Licenca: MIT licenca

12. LightGallery

LightGallery— višenamjenski dodatak za svjetlosni okvir s mnogo dodatne mogućnosti. Dolazi s više od 20 opcija za prilagodbu najsitnijih detalja Lightboxa. Ovdje ima svega, dobro, ili gotovo sve)). Cijela galerija slika s uredno posloženim sličicama, navigacijskim elementima i pomicanjem sličica. Jednostavno HTML označavanje u obliku neuređenog popisa

    koristeći data-src atribut za slike u punoj veličini. Isto vrijedi i za videozapise s Youtubea i Vimea. Izvrsna podrška za sve video formate HTML5, MP4, WebM, Ogg... Animirane sličice, mobilni responzivni izgled, efekti slajdova i glatki prijelazi pri prebacivanju između slika i drugog sadržaja. Izgled jednostavan za oblikovanje i konfiguraciju koristeći CSS. Predučitavanje slike i optimizacija koda. Navigacija pomoću tipkovnice za stolna računala, kao i mogućnost korištenja dodatnih ikona fontova. LightGallery- ovdje je pravi "kombajn", glavna stvar je ne izgubiti se u obilju postavki i opsežnih mogućnosti ovog dodatka.
    Za one koji trebaju pristojan klizač, preporučujem da obratite pozornost na jedan od istih programera.

    • Ovisnost: jQuery
    • Podrška za preglednik: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android i Windows Phone
    • Licenca: MIT licenca

    13. StripJS

    Neobično, čak bih rekao: neobična implementacija lightboxa, odnosno neobična prezentacija sadržaja, kada se slika ili video, u dizajnu lightboxa, pojavi s desne strane, ne ispunjavajući cijeli ekran, već samo određenu veličinu sliku ili video u punoj veličini. Na velikim zaslonima ovaj je pristup razumljiv; interakcija sa stranicom ostaje moguća. Na malim ekranima mobilnih uređaja, sav ovaj inovativni dizajn glatko se pretvara u klasični “lightbox”. Ideja je zanimljiva, pogledajte demo, možda će netko dodati takvu kreativnost.

    • Ovisnost: jQuery
    • Podrška za preglednik: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ i Android 3+
    • Licenca: licenca Creative Commons BY-NC-ND 3.0

    14.Svjetlosni sloj

    Lightbox plugin jednostavan za korištenje koji ide dobro uz bilo koji projekt i također dobro izgleda na bilo kojem zaslonu. Dodatak LightLayer omogućuje kontrolu nad mnogim postavkama, poput promjene boje pozadine i stupnja prozirnosti, položaja osnovnog bloka, odabira prijelaznih efekata pri otvaranju/zatvaranju, funkcijama kojima korisnici mogu samostalno upravljati. Dodatak odlično funkcionira s vanjskim sadržajem web stranice, ugrađenim video playerima i kartama.

    • Ovisnost: jQuery
    • Podrška za preglednik: IE9+, Chrome, Firefox, Safari i Opera
    • Licenca: MIT licenca

    15. FluidBox

    Fluidbox je dodatak za lightbox isključivo za slike. Broj mogućih varijacija u prezentaciji slike doista je impresivan. Dodatak izvrsno funkcionira sa slikama u različitim dizajnima, uključujući plutajuće slike, slike s apsolutnim pozicioniranjem, slike i fotografije uokvirene i uvučene, s pojedinačnim slikama i kombinirane u galeriju. Općenito, to je gubljenje vremena, još uvijek nije moguće opisati sve mogućnosti dodatka u kratkoj prezentaciji, pa je bolje pogledati demo, zavrtjeti ga, okrenuti ga, a mislim da će se mnogima svidjeti ovaj dodatak .

    • Ovisnost: jQuery
    • Podrška za preglednik: IE9+, Chrome, Firefox, Safari, Opera
    • Licenca: MIT licenca

    To je vjerojatno sve! nadam se ovaj kratki osvrt, pomoći će vam razumjeti hrpu ponuđenih proizvoda za web razvoj. Napominjem da nisam koristio sve dodatke predstavljene u izboru na radnim projektima, većinu sam testirao na testnim stranicama ili na radionici, pa ako se pojave neka pitanja, najvjerojatnije ćemo ih zajedno riješiti, a zajedno, kao i uvijek, uspjet ćemo.

    Tražite li odgovarajući ruski predložak za svoje potrebe? U ovom slučaju, vjerojatno biste trebali posjetiti TemplateMonster tržište. Iz jednostavnog razloga jer se stranica pojavila nedavno novi odjeljakšablone Sada se svaki korisnik može upoznati sa zbirkom koja će se ažurirati i ažurirati. Tekstovi za predloške pisani su rukom. Ali to nije jedina prednost podataka. gotova rješenja. Uostalom, u njihovim paketima možete pronaći sve što će vam olakšati rad na razvoju online projekta, uključujući i vizualni editor.

    Sa svim poštovanjem, Andrew

    1. jQuery galerija s efektom okretanja stranica

    Slično rješenje može se koristiti za prikaz najnovijih članaka na blogu ili za predstavljanje proizvoda.

    Jedinstven način za prikaz vaših fotografija u otmjenoj jQuery galeriji.

    3. jQuery galerija slika za proizvod, “slideJS” dodatak

    Dodatak jQuery savršen je za implementaciju stranice proizvoda s više slika. Prijelaz između slika može se izvršiti pomoću minijatura ili pomoću navigacijskih strelica.

    Slika se povećava kada prijeđete mišem preko nje.

    5. Elegantna Lightbox galerija “ppGallery”

    6. jQuery Touch-Gallery

    7. Nova jQuery galerija sa sličicama

    Profesionalna jQuery galerija 2011.

    8. jQuery dodatak “Nivo Zoom”

    Još jedan visokokvalitetni jQuery dodatak od programera Nivo klizača. Uvećajte sliku klikom na sličicu.

    9. jQuery 3d zidna galerija

    Novi jQuery galerija 2011. Feed slika obuhvaća cijelu širinu zaslona. Možete se kretati između fotografija na tri načina: pomoću kotačića miša, pomicanjem na vrhu galerije i korištenjem bloka minijatura na dnu. Galerija izgleda vrlo impresivno.

    Slike u galeriji nasumično se povećavaju i ponovno smanjuju stvarajući efekt mjehurića.

    11. Neobičan prikaz slika u jQuery galeriji

    Pomoću klizača na vrhu možete promijeniti udaljenost između slika u nizu. Kada kliknete na sliku, ona se rotira.

    12. jQuery galerijski dodatak “MB.Gallery”

    13. jQuery galerija koja se proteže da ispuni cijeli zaslon

    Dodatak iz 2011. Nova galerija s opisima slika, koja se proteže cijelim područjem prozora preglednika, bez obzira na njegovu veličinu. Sličice slika su zanimljivo implementirane. Prijelaz između fotografija vrši se pomoću strelica u blizini sličice i pomoću kotačića miša.

    14. Lagana jQuery galerija

    Dodatak automatski skenira mapu i stvara male kopije slika.

    16. Elegantna galerija koja koristi jQuery i Raphael knjižnice

    Zanimljiv efekt kada prijeđete mišem preko sličice.

    17. Nova verzija jQuery dodatka “Supersized” verzija 3.1

    Nedavno sam već spomenuo ovo jQuery rješenje za stvaranje galerija preko cijelog zaslona. Danas vas želim upoznati Najnovija verzija ovaj profesionalni dodatak. Skripta je u potpunosti prerađena, sada galerija radi još brže, a dodane su i neke zanimljive postavke, na primjer, navigacija pomoću tipkovnice, promjenjiva brzina mijenjanja slika, veličina zaslona i druge.

    18. jQuery dodatak “Galleria 1.2.2”

    Nova jQuery galerija za vaše projekte.

    Galerija se pojavljuje na stranici kada pritisnete gumb. Oko uvećane slike pojavljuju se sličice. Možete kontrolirati automatsku promjenu slika. Korištene tehnologije: jQuery, CSS, PHP.

    20. Dodatak “Galerija mjerača vremena”

    jQuery galerija. Implementirano automatsko mijenjanje slajdova i skrolanje sličica ako ih je previše.

    Dodatak za galeriju slika pomoću jQueryja.

    22. javascript galerija za pregled na mobilnim uređajima “PhotoSwipe”

    Galerija slika optimizirana za pregled na mobilnim uređajima (telefonima ili tabletima).

    23. javascript galerija s 3D efektom

    24. jQuery morfing galerija

    Novi jQuery klizač. Nekoliko zgodnih animiranih efekata prilikom mijenjanja slajdova.

    25. jQuery dodatak “Galleria 1.2.3”

    26. jQuery galerija slika “Image Wall”

    Originalna galerija u obliku minijatura različitih veličina razasutih po ekranu, stiliziranih kao slike. Kada kliknete na sličicu, pojavljuje se područje s opisom slike, a kada ponovno kliknete, iskače izvorna velika slika.

    27. CSS3 galerija

    Zanimljiv efekt lebdenja.

    28. Galerija minijatura “Galerija TN3”

    jQyery galerija sa sličicama. Implementirana je mogućnost pregleda u kompaktnom prozoru i u prozoru preko cijelog zaslona, ​​kao i mogućnost onemogućavanja/omogućavanja automatskog mijenjanja slajdova.

    29. Mreža slika “Grid-Galerija”

    Mreža slike rastegnuta je ovisno o širini prozora preglednika. Zanimljiv efekt lebdenja: aktivni red i stupac su istaknuti.

    30. jQuery Galerija zamjene

    Lagana jQuery galerija u nekoliko redaka koda.

    Demo stranica predstavlja nekoliko opcija za padajuće mega izbornike, u različitim stilovima. U ovom izborniku možete konfigurirati: učinak ispadanja, brzinu ispadanja, a također možete odabrati između ispadanja klikom ili lebdenjem miša iznad stavke.

    31. jQuery Galerija slika

    jQuery galerija s opisima slika. Nekoliko efekata prijelaza slajdova. Kretanje između slika vrši se pomoću strelica ili klikom na sličicu.

    Slika i njezine minijature izrađene su u obliku krugova.

    33. jQuery dodatak za portfelj fotografa "Navigacija slikama portfelja"

    Izvornik javascript rješenje za izradu portfolija fotografa. Kretanje između slika vrši se pomoću strelica gore/lijevo/desno i pomoću mini-kvadrata (imitacija kretanja u 2D prostoru). Možete grupirati fotografije iz različitih foto sesija u različite okomite retke i kretati se kroz njih pomoću navigacijskih elemenata. Pogledajte demo.

    34. Dodatak “jmFullZoom”

    Dodatak za pregled slika koje se protežu na cijelu veličinu prozora preglednika. Može se koristiti za prikaz radova iz portfelja.

    35. Foto karta

    Galerija integrirana sa Google karta. Možete ga proširiti na cijeli zaslon klikom na ikonu u donjem desnom kutu. Savršeno za web stranice za putovanja.

    36. Galerija slika sa sličicama

    jQuery galerija sa sličicama.

    37. jQuery galerija “Galleriffic”

    Dijaprojekcija sa sličicama.

    38. jQuery CSS3 dodatak “Efekt prikaza valova”

    Valovita prezentacija slika i sadržaja na stranici. Kada kliknete na sličicu, sve slike se povećavaju i pojavljuju se njihovi nazivi. Ponovnim pritiskom otvara se blok s opisom fotografije.

    Mnogo opcija prikaza i postavki.

    42. Plogger

    43. Jednostavna, slatka galerija napravljena pomoću CSS-a, bez korištenja skripti

    Izgleda lijepo i odlično radi u svim modernim preglednicima

    Možete kontrolirati automatski prikaz slajdova (start/stop), mijenjati slajdove pomoću strelica na tipkovnici, automatsko označavanje stranica naslova slajdova ako ih ima mnogo, podržava višestruke galerije na jednoj stranici, naslove za slajdove, API podršku i mogućnost stvaranja vlastitih efekti prijelaza slajdova

    46. ​​​​Galerija u obliku hrpe fotografija

    Ovako bi trebao izgledati rezultat galerije koju ćemo napraviti. Možete pogledati demo i, ako želite, preuzeti konačni rezultat galerije.

    U ovom vodiču ću vam pokazati kako stvoriti minimalistički, ali u isto vrijeme zgodan i funkcionalan galerija fotografija na jQuery, ili galeriju slika, kako želite. Galerija ima mogućnost stvaranja kategorija, nakon čega slijedi filtriranje. Također je moguće pokrenuti slide show. Galerija radi u svim preglednicima, tako da neće biti problema s prilagodbom.

    Za izradu ove galerije koristit će se dvije besplatne biblioteke JQuery: Živi pijesak I PrettyPhoto. Oni znatno olakšavaju stvaranje galerije. Kao i uvijek, rezultat rada možete vidjeti na demo stranici, a također preuzeti arhivu iz radne galerije i to je to izvorne datoteke. Jedini nedostatak, da tako kažemo, je ručno kreiranje sličica za velike slike. I u svemu ostalom ovo galerija vrijedan pažnje.

    IZVORI

    HTML označavanje

    Prvo, pogledajmo ploču s popisom kategorija, ovo je popis s grafičkim oznakama ul. Štoviše, svaki element popisa mora imati jedinstveno ime klase.


    • Kategorije:

    • svi

    • 1. kategorija

    • Kategorija 2

    • Kategorija 3

    • Kategorija 4







  • Naziv slike




  • Kao što je gore spomenuto, stavke popisa su slike u galeriji. Svaki element popisa uključuje komponente. Ovo je sama slika, odnosno njena minijatura, kao i opis. Minijatura je poveznica na glavnu sliku. Atribut rel potreban je za pozivanje javascripta i otvaranje glavne slike.

    Ne zaboravite također na 2 važne stvari: element liste li mora imati jedinstveni data-id atribut. Atribut data-type sadrži klasu kategorije, čiji sam popis gore opisao. Čini se da je sve u maržu.

    CSS stilovi

    Neću se posebno fokusirati na stilove, jer koristimo gotovu biblioteku PrettyPhoto, koji je odgovoran za povećanje slike, i css kod dovoljno. Međutim, vrijedi napomenuti da postoji 5 opcija za dizajniranje uvećane slike, iako je idealno samo 3, budući da se u dvije opcije uklanja samo zaokruživanje.

    Stoga ću samo pokazati CSS stilovi za sličice i popis kategorija.

    Portfolio-categ ( margin-bottom:30px; )
    .portfolio-categli (
    prikaz:umetnuti;
    margin-desno:10px;
    }
    .image-block(
    prikaz: blok;
    položaj: relativan;
    }
    .image-block img (
    rub: 1px solid #d5d5d5;
    rubni radijus: 4px 4px 4px 4px;
    pozadina:#FFFFFF;
    padding:10px;
    }
    .image-block img:hover (
    rub: 1px puni #A9CF54;
    box-shadow:0 0 5px #A9CF54;
    }
    .portfolio-area li (
    plovak: lijevo;
    margina: 0 12px 20px 0;
    preljev: skriven;
    širina: 245px;
    padding:5px;
    }
    .home-portfolio-text ( margin-top:10px; )
    li.active a ( text-decoration:underline; )

    U principu, sve bi trebalo biti jasno sa stilovima. Da bi se kategorije poredale, svojstvo prikaza je postavljeno na inline. Da biste slici dali učinak obrisa, postavite boju pozadine (bijelu) i ispunu na 10 piksela. Veličine stavki popisa postavljene su u .portfolio-area li.

    jQuery

    I na kraju, najvažnije je čemu cijeli sat služi. Ovo je jQuery kod. Počnimo s filtriranjem slika prema kategoriji.

    // Odaberi sve dječji elementi portfolio-area i zapišite ga u varijablu
    var $data = $(".portfolio-area").clone();

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

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

    If (filterClass == "all") (
    var $filteredData = $data.find(".portfolio-item2");
    ) inače (
    var $filteredData = $data.find(".portfolio-item2");
    }
    $(".portfolio-area").quicksand($filtredData, (
    trajanje: 600,
    prilagodi visinu: "automatski"
    ), funkcija () (

    LightboxPhoto();
    });
    $(ovo).addClass("aktivno");
    vratiti lažno;
    });

    Pomoću metode clone() i selektora odabiremo sve podređene elemente .portfolio-area i upisujemo ih u varijablu $data. Zatim pratimo klik na jednu od kategorija, li element popisa s klasom .portfolio-categ. Sve kategorije činimo neaktivnima uklanjanjem removeClass(“active”), ako se to ne učini, s vremenom će sve kategorije biti aktivne i filtriranje će prestati.

    Budući da kliknemo na element popisa, ovaj selektor sadrži element popisa, to jest li , iz njega uzimamo vrijednost atributa klase i metodom split dijelimo naziv klase na nekoliko dijelova, granica je razmak (tj. ako je klasa bila "sve aktivne" tada nakon dijeljenja dobivamo niz "sve" i "aktivno"). Zatim pomoću metode odsječka odabiremo prvi element niza (u našem slučaju, "sve") i zapisujemo rezultat u varijablu filterClass. Ako nema razmaka, naziv klase se neće promijeniti.

    Zatim provjeravamo sadrži li varijabla filterClass niz svi, a zatim pomoću metode .find odabiremo sve elemente s klasom portfolio-item2 iz polja $data, koje smo razmatrali gore. Odabrani elementi (a to su svi elementi liste, odnosno sve slike) smještaju se u varijablu filteredData.

    Inače, ako filterClass nije jednak svi, tada nećemo smjestiti sve elemente liste u varijablu filterData, već samo one čiji atribut tipa podataka odgovara klasi kategorije. Ukratko, elementi samo jedne kategorije.

    I na kraju prosljeđujemo rezultirajuću varijablu u knjižnicu jquery živi pijesak, koji filtrira slike. To je to za filtriranje.

    Sada, što se tiče povećanja slike u skočnom prozoru. Ovdje je sve puno jednostavnije.

    JQuery("a").prettyPhoto((
    animationSpeed: "brzo",
    slideshow: 5000,
    tema: "facebook",
    show_title: false,
    overlay_gallery: netočno
    });

    Prati se klik na poveznicu čiji rel atribut počinje s prettyPhoto. Tada na scenu stupa knjižnica lijepaFotografija, a slika se čudesno povećava. Usput, također prolazimo nekoliko parametara. Kao što je brzina animacije velika, kašnjenje slide showa je 5 sekundi, Facebook tema dizajna (ukupno ima 5 tema, nalaze se u mapi images/prettyPhoto), a također zabranjujemo prikazivanje naziva slike i povećanje slike pri lebdenju miša.

    U našoj zbirci skripti možete pronaći male, ali vrlo korisne i funkcionalne dodatke za svoju web stranicu. Okrećući se sredstvima jQueryGalerija, galerija koja se lako organizira digitalne fotografije lijepog dizajna, s mogućnošću listanja, zumiranja, pregledavanja sličica i mnogih drugih korisne funkcije. Postoje i stroga rješenja za profesionalne web stranice i svijetla rješenja s animacijom i drugim specijalnim efektima za zabavne projekte.

    Sredstvima jQuery slike može se pregledavati bez ponovnog učitavanja stranice i bez povećanja protoka prometa. Predstavljeni dodaci omogućuju vam da optimizirate učitavanje slika u stvarnom vremenu i predstavite galeriju na praktičan i jednostavan način. Zahvaljujući jednostavnosti postavki i mnogim dostupnim rješenjima, sami jQuery galerija fotografija sada može izgledati točno onako kako želite. Prikazane skripte testirane su na različitim platformama i imaju izvrsnu kompatibilnost.

    Bok svima! U ovom ćemo članku pogledati, kako napraviti lijepu galeriju koja se lako sortira koristeći JQuery.

    Lijepa, zgodno sortirana galerija je prekrasna stvar za vašu web stranicu koja će oduševiti vas i vaše posjetitelje. Danas ćemo pogledati dodatak knjižnice koji se vrlo lako instalira i konfigurira JQuery– Filterizr.

    Unatoč jednostavnosti korištenja, dodatak je prilično lagan i učinkovit. Pogledajmo ga pobliže.

    Demonstracija

    Kako biste vidjeli kako dodatak radi, idite na službenu web stranicu i evo ga pred vama!

    Možete odabrati sortiranje prema gradu, prirodi, industriji, izlasku, zalasku sunca ili prikazati sve fotografije (zadano). Postoji gumb Promiješaj, koji će vam omogućiti miješanje slika. Gumbi A.S.C. I OPIS poredajte slike uzlaznim i silaznim redoslijedom. Ako želite pronaći sliku po poziciji ili opisu, odaberite željenu stavku na padajućem popisu i unesite upit u polje za pretraživanje. Kada prijeđete mišem preko slike, slika se iz crno-bijele pretvara u boju.

    Montaža

    Za preuzimanje biblioteke kliknite gumb preuzimanje datoteka ili koristiti NPM:

    Npm instalirajte filterizr

    Dodatak je već konfiguriran izvan kutije, ali ako želite nadjačati zadane postavke, možete:

    1) Proslijedite objekt s parametrima konstruktoru JQuery

    Var filterizd = $(".filtr-container").filterizr((
    // mogućnosti
    })

    2) Prepišite parametre pomoću postaviOpcije() metoda u objektu Filterizr.

    Filterizd.filterizr("setOptions", (
    // mogućnosti
    })

    Mogućnosti

    Zadani parametri:

    Opcije = (
    trajanje animacije: 0.5,
    povratni pozivi: (
    onFilteringStart: funkcija() ( ),
    onFilteringEnd: funkcija() ( )
    },
    kašnjenje: 0,
    način kašnjenja: "progresivno",
    popuštanje: "popuštanje",
    filter: "sve",
    filterOutCss: (
    neprozirnost: 0,
    transformacija: "ljestvica (0,5)"
    },
    filterInCss: (
    neprozirnost: 0,
    transformacija: "razmjer(1)"
    },
    raspored: "ista veličina",
    selektor: ".filtr-spremnik",
    setupControls: istina
    }

    Više detaljne upute a opis svakog parametra nalazi se na