Ajax galerija slika. Fotorama - responzivna jQuery galerija, instalacija i konfiguracija. jQuery CSS3 dodatak "Efekt prikaza valova"

Galerije slika i klizači neki su od najpopularnijih jQuery formata. Zahvaljujući njima, svojoj stranici možete dodati potrebnu količinu vizualnog sadržaja, a pritom štedjeti dragocjeni prostor.

Galerije i klizači čine stranicu manje zauzetom, ali vam još uvijek omogućuju dodavanje svih slika koje su vam potrebne za prenošenje vaše poruke. Posebno će biti korisni za online trgovine.

U današnjem smo članku za vas prikupili najbolje jQuery galerije slika i klizače.

Da biste ih instalirali, samo dodajte odabrane dodatke u odjeljak head HTML stranice zajedno s jQuery bibliotekom i konfigurirajte ih prema dokumentaciji (samo nekoliko redaka koda).

Odaberite koji se od ovih elemenata savršeno uklapa u vaš projekt.

1. Bootstrap klizač

Bootstrap Slider besplatan je klizač za slike optimiziran za mobilne uređaje s pomicanjem dodirom i prevlačenjem. Izgledat će sjajno na bilo kojem zaslonu i u bilo kojem pregledniku. U klizače možete učitati slike, videozapise, tekst, minijature i gumbe.

2. Klizač za pregled proizvoda

Product Preview Slider utjelovljuje puni potencijal jQueryja i savršeno se uklapa u svako sučelje. Također ćete biti zadovoljni kvalitetom i čistoćom koda ovog dodatka.

3. Proširiva galerija slika

Proširiva galerija slika nevjerojatan je dodatak koji se jednim klikom pretvara u galeriju preko cijelog zaslona. Može se koristiti za odjeljak "O nama" ili za pregled informacija o proizvodu.

4. Fotorama

Fotorama je responzivni jQuery galerijski dodatak koji radi i za radnu površinu i za radnu površinu. mobilni preglednici. Nudi razne mogućnosti navigacije: minijature, pomicanje, gumbe naprijed i natrag, automatske dijaprojekcije i grafičke oznake.

5. Potopni klizač

Immersive Slider omogućuje vam stvaranje jedinstvenog iskustva gledanja slajdova sličnog klizaču Google TV-a. Možete promijeniti pozadinsku sliku da bude zamućena kako bi glavna fotografija ostala u fokusu.

6. Najmanje

Leastjs je responzivni jQuery dodatak koji će vam pomoći da stvorite nevjerojatnu galeriju. Kada kursorom prijeđete iznad slike, pojavljuje se tekst, a kada kliknete, prozor se širi na cijeli zaslon.

7. Predložak kliznih ploča

Ovaj dodatak je idealan za portfelj. Stvorit će blokove slika poredanih vodoravno (okomito na male ekrane) na koje će odabrani sadržaj biti povezan.

8. Squeezebox predložak portfelja

Predložak portfelja Squeezebox nudi efekte kretanja za vaš portfelj. Kada prijeđete pokazivačem iznad glavne slike (ili bloka), pojavljuju se usidreni elementi.

9. Nasumično mijenjajte slike

Shuffle Images je nevjerojatan responzivni dodatak koji vam omogućuje stvaranje galerije sa slikama koje se mijenjaju kada lebdite.

10. Besplatni dodatak za jQuery Lightbox

Besplatni jQuery Lightbox dodatak pomoći će vam da prikažete jednu ili više slika na jednoj stranici. Također se mogu povećati i vratiti na izvornu veličinu.

11. PgwSlider – Responzivni klizač za jQuery

PgwSlider je minimalistički klizač za slike. jQuery kod je lagan pa će vas brzina učitavanja ovog dodatka ugodno iznenaditi.

12. Galerija razbacanih polaroida

Scattered Polaroid Gallery je zapanjujući slajder izrađen u ravni dizajn. Njegovi se elementi kaotično pomiču prilikom izmjene slika, što izgleda nevjerojatno.

13. Filtar za poskočni sadržaj

Bouncy Content Filter je idealno rješenje za portfelje. Ovaj dodatak omogućuje korisnicima da brzo prijeđu iz jedne kategorije u drugu.

14. Jednostavan jQuery klizač

Jednostavan jQuery klizač opravdava svoje ime. Ovaj dodatak kombinira JavaScript elementi, HTML5 i CSS3. Zadana demonstracija dopušta samo učitavanje teksta, ali ako napravite nekoliko promjena, možete dodati i vizualni sadržaj.

15. Glide JS

Glide JS – jednostavan, brz i responzivan jQuery klizač. Lako se konfigurira, a dodatak ne zauzima puno prostora.

16. Cijeli zaslon povucite klizač s paralaksom

Ovaj nevjerojatni jQuery klizač s mogućnošću učitavanja slika i teksta prikladan je za bilo koje mjesto. Oduševit će korisnike blagim efektom paralakse i sporim pojavljivanjem teksta.

Dugo sam birao temu za današnju temu. Kao rezultat toga, primijetio sam da još nismo napravili odabir sa galerije slika. Mislim da je to izvrsna tema jer galerije prisutan na mnogim stranicama. Iskreno govoreći, svi nisu baš privlačni. Uzimajući u obzir trenutne trendove razvoja jquery, html5 itd. Pomislio sam, nakon svega, moraju postojati puno atraktivnija rješenja od onih s kojima sam se prije susretao. Tako. Nakon što smo proveli dan, uspjeli smo pronaći ogroman broj scenarija. Od cijele ove planine odlučila sam odabrati samo jer volim, kao što ste već primijetili iz prethodnih postova.
Galerija slika primjenjiv ne samo u slučaju s foto albumima. Skripta se može koristiti, mislim da bi bilo još ispravnije, kao portfolio za fotografe, dizajnere itd. Jquery efekti pomoći će privući pozornost posjetitelja i jednostavno dodati eleganciju vašoj stranici.
Tako. Kolekcija za vašu pažnju jquery dodaci za galeriju slika za web mjesto.
Ne zaboravite komentirati i zapamtite, kako ne biste izgubili ovu kolekciju, možete je dodati u svoje favorite klikom na zvjezdicu na dnu članka.

KUTIJA ZA FOTOGRAFIJE

Besplatno, jednostavno, responzivna galerija slike, u kojem su svi efekti i prijelazi napravljeni pomoću css3. Idealno za izradu web stranice s portfeljem fotografa.

Galerija S

Atraktivan Jquery dodatak galerije slika. Animacija radi pomoću css3.

DIJAMANTI.JS

Izvornik dodatak za izradu galerije slika. Minijature su oblikovane kao romb, što u ovaj trenutak jako popularno. Ovaj obrazac je napravljen koristeći css3. Jedina mana ove galerije je nepostojanje lightboxa u kojem bi se fotografija otvarala u punoj veličini. Odnosno, morat ćete uvrnuti dodatak za svjetlosni okvir. Ova skripta generira prilagodljivu mrežu slika u obliku dijamanta.

Superkutija

Korištenje moderne galerije slika Jquery, css3 i html5. Svi smo navikli na činjenicu da kada kliknete na pretpregled, cijela slika se otvara u lightboxu (skočni prozor). Programeri ovog dodatka odlučili su da je lightbox već nadživio svoju korisnost. Slike u ovoj galeriji otvaraju se ispod pregleda. Pogledajte demo i uvjerite se da ovo rješenje izgleda mnogo modernije.
|

Galerija glatkog dijagonalnog blijeđenja

Moderna galerija slika u kojoj pregledi su raspoređeni po cijelom prostoru zaslona. Skripta može skenirati mapu s fotografijama na poslužitelju, odnosno ne morate umetati svaku sliku zasebno. Samo prenesite slike u mapu na poslužitelju i odredite put do direktorija u postavkama. Tada će skripta sve učiniti sama.

Galerija Gama

Elegantna, lagana, responzivna galerija slika s mrežom u stilu Pinteresta koja je ovih dana postala vrlo popularna. Scenarij radi odlično na oba desktop računala, i dalje Mobilni uredaji s bilo kojom rezolucijom zaslona. Izvrsno rješenje za izradu portfelja web dizajnera.

MREŽICA SLIČICA S PROŠIRIVIM PREGLEDOM

Dodatak je adaptivna mreža slike. Kada kliknete ispod, pojavit će se veća fotografija i opis. Dobar za stvaranje portfelja.

jGalerija

jGalerija je responzivna galerija slika preko cijelog zaslona. Efekti, prijelazi, pa čak i stil lako se prilagođavaju.

Glisse.js

Jednostavan, ali vrlo učinkovit dodatak za galeriju slika. Upravo je to rješenje kada trebate izraditi foto album. Dodatak podržava albume i ima vrlo cool efekt listanja.

Mosaic Flow

Jednostavan, prilagodljiv Galerija slika rešetke u stilu Pinteresta.

Galerija

Još jedna moderna galerija s rešetkom u stilu Pinteresta filtriranom po kategoriji. Radi u preglednicima: Chrome, Safari, Firefox, Opera, IE7+, Android preglednik, Chrome mobilni, Firefox mobilni.

najmanje.js

Izvrsno besplatna galerija slika koristeći JQUERY, 5 i CSS3. Ima vrlo privlačnu izgled i nedvojbeno će privući pozornost vaših posjetitelja.

flipLightBox

Jednostavna galerija slika. Kada kliknete na pretpregled, cijela slika se otvara u okviru za osvjetljavanje.

blueimp galerija

Fleksibilna galerija. Mogućnost izlaza na modalni prozor ne samo slike, nego i video. Izvrsno radi na uređajima osjetljivim na dodir. Lako ga je prilagoditi i moguće je proširiti funkcionalnost pomoću dodatnih dodataka (Pogledajte sljedeći dodatak).

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.

Danas je responzivni dizajn postao izbor broj jedan za dizajnere i programere, budući da sve više ljudi želi da se njihove web stranice izvode na pametnim uređajima. Responzivni dizajn privlači pozornost mobilnog korisnika i pomaže vam u generiranju potencijalnih kupaca i prodaje koji podižu vaše poslovanje na višu razinu.

Danas možete stvoriti responzivni izgled za gotovo sve, poput izbornika, rešetke, stupca, pa čak i slika i slika. Ako sadržaj svoje web stranice, slike i videozapise želite prikazati u responzivnom stilu galerije, učinite sljedeće jQuery dodaci za galeriju slika moglo bi vam pomoći s tim.

Ovaj članak uključuje neke od Najbolji dodaci za jQuery galeriju slika s odgovarajućim odzivom koji ne samo da će vam omogućiti stvaranje odgovarajućih galerija slika za vaše web stranice, već ih i prikazati u elegantnim stilovima kako bi vaša web stranica bila ljepša i vizualno zadivljujuća.

Ispod je popis Najbolji dodaci za jQuery galeriju slika koje responzivno vrijedi razmotriti u 2016.

Bootstrap Photo Gallery jednostavan je jQuery dodatak koji će za vaše slike stvoriti responzivnu fotogaleriju temeljenu na Bootstrapu.
Ovaj dodatak podržava promjenjivu visinu za slike i opise. Opcijski "modalni" okvir sa "sljedećim" i "prethodnim" stranicama je također uključen.
Demo i preuzimanje

2. JK Responsive YouTube i Galerija slika

To je moderna galerija u stilu okvira za prikaz slika i YouTube videa na vašoj web stranici. Sučelje galerije potpuno je osjetljivo i lijepo radi na svim velikim ili malim uređajima.
Demo i preuzimanje

3. Faba

FABA je responzivni Facebook albumi i fotografije galerija jquery dodatak koji će učitati sve albume i fotografije s odabrane Facebook stranice.

Postoji oko 90 opcija koje možete uređivati ​​i možete prilagoditi gotovo sve: animacije, efekte lebdenja, svaki dio animacija lebdenja, tekst, ponašanja i još mnogo toga. Prekrasne albume možete integrirati u svoj projekt ili web stranicu.

xGallerify je lagani, responzivni dodatak za galerije koji vam omogućuje stvaranje prekrasnih galerija slika za vaše web stranice. Ovaj dodatak je lagan (3kb veličine datoteke), jednostavan za korištenje i dolazi s nizom prilagodljivih opcija i stilova.
Demo i preuzimanje

Instagram Element je vrhunski Instagram dodatak za blogere, fotografe, modele i sve koji žele povećati svoju prisutnost na Instagramu.
Ovaj dodatak u potpunosti reagira i omogućuje vam jednostavno upravljanje s više od 50 opcija te vam omogućuje prekrasan prikaz fotografija na bilo kojem uređaju.

SnapGallery je jednostavan jQuery dodatak koji pretvara ružan popis slika različitih veličina u prekrasnu, prilagodljivu galeriju pomoću jednog retka JavaScripta.

Potpuno je osjetljiv, prilagodljiv i omogućuje vam odabir razmaka između slika, minimalne dopuštene širine prije slaganja i maksimalnog broja stupaca, s više opcija na putu!
Demo i preuzimanje

Eagle Gallery ovo je moderna galerija s funkcijom zumiranja slike. Za upravljanje galerijom možete koristiti pokrete ili upravljačke gumbe. Ovo je potpuno responzivna galerija koja ima podršku za zaslon osjetljiv na dodir i stvorena je za mobitel uređaja, prijenosnih i stolnih računala.

Pomoću ove galerije možete jednostavno napraviti galeriju proizvoda na svojoj internet trgovini za detaljan pregled i prilagoditi je pomoću opcija.

Unite Gallery višenamjenska je JavaScript galerija temeljena na jQuery biblioteci. Izgrađen je modularnom tehnikom s velikim naglaskom na jednostavnost korištenja i prilagodbu. Vrlo je jednostavno prilagoditi galeriju, mijenjati njen izgled putem css-a, pa čak i napisati vlastitu temu. Ipak, ova je galerija vrlo moćna, brza i ima većinu današnjih značajki poput odziva, omogućenog dodira, pa čak i značajke zumiranja, to je jedinstven učinak.
Demo i preuzimanje

jQuery lightGallery je lagana jQuery okvir za osvjetljavanje galerija za prikaz galerije slika i videa.

Lightgallery podržava navigaciju dodirom i prevlačenjem na uređajima sa zaslonom osjetljivim na dodir, kao i povlačenje mišem za stolna računala. To korisnicima omogućuje navigaciju između slajdova prelaskom prsta ili povlačenjem mišem.

Lightgallery dolazi s brojnim opcijama koje vam omogućuju vrlo jednostavnu prilagodbu dodatka. Možete jednostavno prilagoditi izgled i dojam galerije ažuriranjem SASS varijabli.
Demo i preuzimanje

Ovo je još jedan izvrstan jQuery dodatak za galeriju slika koji vam omogućuje stvaranje galerije rasporeda rešetki za vaše slike i videozapise. Ovaj je dodatak u potpunosti responzivan i opremljen brojnim značajkama kao što su dijeljenje na društvenim mrežama, beskonačno pomicanje, css3 animacije, filtri i još mnogo toga.

blueimp Gallery je osjetljiva na dodir i prilagodljiva galerija slika i videa, vrtuljak i okvir za osvjetljavanje, optimizirana za mobilne i stolne internetske preglednike.

Sadrži navigaciju prelaskom prsta, mišem i tipkovnicom, efekte prijelaza, funkciju dijaprojekcije, podršku za cijeli zaslon i učitavanje sadržaja na zahtjev, a može se proširiti za prikaz dodatnih vrsta sadržaja.
Demo i preuzimanje

nanoGALLERY je galerija slika osjetljiva na dodir s opravdanim, kaskadnim i rešetkastim rasporedom. Podržava slike s vlastitim hostom i uvlačenje foto albuma Flickr, Picasa, Google+ i SmugMug.

Sadrži višerazinsku navigaciju u albumima, kombinirane efekte lebdenja na minijaturama, responzivne veličine minijatura, više izgleda, prikaz slajdova, prikaz preko cijelog zaslona, ​​označavanje stranica, lijeno učitavanje slika i još mnogo toga.
Demo i preuzimanje

flipGallery je besplatna jQuery galerija fotografija s elegantnim okretnim prijelazima između minijatura i uvećanja okvira za pregled. Ostale značajke uključuju dinamičko strujanje slika, automatsko označavanje stranica, automatsko obrezivanje i transparentno preklapanje slika.

Ovaj dodatak također ima premium verziju koja dolazi s nekoliko izvrsnih značajki i svakako uključuje odziv.
Demo i preuzimanje

Fancy Gallery responzivni je jQuery dodatak za galeriju slika koji vam omogućuje prikaz slika i videozapisa u otmjenom stilu. Ovaj dodatak ima mnogo mogućnosti prilagodbe i možete dodati neograničen broj albuma, videozapisa, slika i još mnogo toga.

Dodatak dolazi s različitim efektima lebdenja za minijature i naslove, koji se također mogu prilagoditi. Možete birati između 7 unaprijed definiranih tema boja ili jednostavno stvoriti vlastitu temu boja.

Balanced Gallery je jQuery dodatak koji ravnomjerno raspoređuje fotografije po recima ili stupcima, maksimalno iskorištavajući predviđeni prostor. Fotografije se prema zadanim postavkama skaliraju na temelju veličine elementa "spremnik", što Balanced Gallery čini dobrim izborom za responzivne web stranice.
Demo i preuzimanje

16. Galerija S

S Gallery koristi HTML5 Full Screen API i uvelike se oslanja na CSS3 animacije i CSS3 transformacije, tako da će raditi samo u preglednicima koji podržavaju te značajke.
Demo i preuzimanje

17. Ultimate Grid Responsive Gallery

Ovo je HTML | CSS | JQuery Grid s okvirom za osvjetljavanje, možete odrediti minijature za rešetku i kada kliknete na nju da biste otvorili okvir za osvjetljavanje, učitat će se normalna slika, možete odrediti tekst za naslove i okvir za osvjetljavanje. Također ne morate učitati sve slike odjednom (zbog performansi) tako da možete odrediti broj slika za učitavanje kada se prvo učitava i broj slika za učitavanje kada kliknete gumb "učitaj još slika".

Responsive Thumbnail Gallery je jQuery dodatak za stvaranje galerija slika koje se skaliraju kako bi odgovarale njihovom spremniku.
Demo i preuzimanje

SuperBox je jQuery dodatak koji cijelu 'sliku' i 'lightbox' podiže korak dalje, smanjujući ovisnost o JavaScriptu i učitavanju slike kako bi lightboxing postao stvar prošlosti! Korištenje HTML5 data-* atributa, responzivnih izgleda i jQueryja.

SuperBox čini čuda kao statična galerija slika koju možete kliknuti da biste otkrili punu verziju slike.
Demo i preuzimanje

Ultimate Thumbnail gallery potpuno je responzivan dodatak za galeriju slika koji dolazi u dvije vrste izgleda (mreža i linija, okomito i vodoravno), s pomicanjem (jScrollPane) ili navigacijom pomoću gumba. Okviri sa sličicama podržavaju bilo koji HTML element unutar njih.

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.