od Dmitrija Semenova
je jQuery galerija slika i dodatak za klizač sadržaja. Potpuno je prilagodljiv, prilagođen dodiru i ima modularnu arhitekturu koja vam omogućava da uključite samo funkcije koje su vam potrebne za optimizaciju veličine datoteke i performansi.
od Andyja
Veoma prilagodljiv dodatak za galeriju/izlog za jQuery.
od Trenta
Galleriffic je jQuery dodatak koji pruža bogato, besplatno iskustvo nakon povratka optimizirano za rukovanje velikim količinama fotografija uz očuvanje propusnog opsega.
od Aino
Galleria je JavaScript okvir galerije slika izgrađen na vrhu jQuery biblioteke. Cilj je pojednostaviti proces kreiranja profesionalnih galerija slika za web i mobilne uređaje.
od CatchMyFame
Pre neki dan sam tražio jednostavan način pomoću jQueryja za prelazak između niza slika na stranici. Dakle, kao koder, krenuo sam da kreiram sopstveni dodatak.
autora Thomasa Kahna
Smooth Div Scroll je jQuery dodatak koji pomiče sadržaj horizontalno lijevo ili desno. Osim mnogih drugih dodataka za pomicanje koji su napisani za jQuery, Smooth Div Scroll ne ograničava pomicanje na različite korake.
autor Victor Zambrano – frwrd.net
Minishowcase je mala i jednostavna php/javascript galerija fotografija na mreži, koju pokreće AJAX koja vam omogućava da lako prikažete svoje slike na mreži, bez složenih baza podataka ili kodiranja, omogućavajući vam da imate galeriju koja se može pokrenuti za nekoliko minuta.
autora Caspara Davida Friedricha
EOGallery je web animirana galerija slajdova napravljena pomoću jQueryja. Koristi samo osnovne jQuery funkcije i Thickbox Codyja Lindleya za prikaz većih slika.
od Arnaulta Pachota
Vrteška u više formata za jQuery, nenametljiv i pristupačan portfolio koji podržava više medija: fotografije, video (flv), audio (mp3). Ovaj dodatak za jQuery će automatski otkriti ekstenziju svakog medija i primijeniti prilagođeni player.
od Stefana Petra
Još jedan dodatak za galeriju slika sa efektom prostora, vrlo lagan i jednostavan dodatak.
od Moreno Di Domenico
jmFullWall je jQuery dodatak za kreiranje impresivnog portfolia.
od Fabrizio Calderan
Mosaiqy je jQuery dodatak za pregled i zumiranje fotografija koji radi na Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome i IE7+. Fotografije se preuzimaju iz JSON/JSONP strukture podataka i nasumično premještaju unutar mreže. Sve skupe animacije preuzima vaš GPU na nedavnim pretraživačima koristeći CSS3 tranzicije, minimizirajući CPU opterećenje.
od Codyja
Sljedeći jQuery dodatak pretvara skup slika u malu galeriju s nekoliko opcija. Mikro galerija slika omogućava prebacivanje između mrežnog prikaza koji prikazuje pregled slika u vidu sličica i jednog prikaza koji prikazuje samo jednu sliku.
od Malihu
Jednostavna, ali elegantna galerija slika preko cijelog ekrana kreirana pomoću jQuery okvira i jednostavnog CSS-a.
Sličice projekta se pomiču promjenom položaja kursora miša u lijevoj koloni. Područje sadržaja prikazuje uvećanu sliku s nazivima projekata, opisom i listom korištenih tehnologija. Kako se krećete između sličica, informacije o projektu se mijenjaju iz jedne u drugu sa zadivljujućim animiranim efektom. Kada kliknete na sliku na stranici sa opisom, ona se takođe uvećava pomoću jQuery animacije. Također želim napomenuti zapanjujuću elegantnost izgled cijelu stranicu portfolija. Pogledajte demo.
Odlična implementacija web stranice s portfoliom fotografa. Kada kliknete na stavku menija, oblast sa sadržajem fiksne visine i širine prikuplja se iz kvadrata raštrkanih po ekranu. Kako bi se više informacija uklopilo u fiksno područje, omogućeno je pomicanje sadržaja. Implementacija prikaza radova iz portfelja implementirana je na neuobičajen način: klikom na sličicu, fotografija se prikazuje kao pozadinska slika, koja se automatski skalira pri promjeni veličine prozora pretraživača.
Originalno rješenje za kreiranje online portfelja. Blokovi projekta (sličice i kratak opis sa vezom) prikazuju se nekoliko zaredom; kada se prozor pretraživača promeni, blokovi se ravnomerno raspoređuju na stranici sa animiranim efektom. Svaki projekt može imati nekoliko sličica, prijelaz između kojih se vrši pomoću strelica. Klikom na link otvara se stranica sa punim opisom, na kojoj je tekst postavljen na poluprozirnom bloku fiksne visine sa pomicanjem. Skalabilna slika projekta koristi se kao pozadina stranice. Izgleda super - pogledajte demo.
Implementacija vertikalnog i horizontalnog skrolovanja.
Mreža koja se može prevući koja se sastoji od blokova sadržaja i slika. Mreža se može prevlačiti mišem (pritisnite bilo koju tipku miša i povucite u željenom smjeru). Kada kliknete na sličicu, glavna slika se proširuje na punu širinu ekrana. Kada kliknete na tamni blok s tekstom, otkriva se područje s detaljnijim opisom.
Jednostrani sajt sa animiranim promjenom sadržaja. Na demo stranici se krećete kroz kartice menija da vidite efekat.
Uz pomoć ovoga jQuery dodatak i "Switch Display Options" možete implementirati prekidač na stranici, pomoću kojeg će posjetitelj prelaziti sa tabelarnog prikaza informacija na puni prikaz sa opisom blokova. Savršeno za portfolio.
Originalno jQuery rješenje kreirano za web stranicu kafića. Šablon ima zanimljivu jQuery galeriju za prikaz jela iz menija. Slike u galeriji su skalirane prema veličini prozora pretraživača. Prvo, galerija prikazuje sličice sa nazivom i kratkim opisom jela, dok je fotografija u punoj veličini prikazana zatamnjena u pozadini. Navigacija između dostupnih fotografija se vrši pomoću strelica ili točkića miša. Klikom miša u načinu galerije uklonit će se sličice s opisima i omogućiti vam da vidite originalne velike slike rastegnute cijelom širinom prozora. Da biste se vratili na meni sajta iz galerije, morate kliknuti na link u gornjem desnom uglu. Pored šik jQuery galerije, Google mapa je vrlo efikasno integrisana u šablon.
Za stvaranje svojevrsnih "zidova" fotografija ili HTML blokova koji se mogu povlačiti mišem po ekranu unutar fiksnog područja.
Prikaz na stranici različitih elemenata duž kruga određenog prečnika.
Stranica implementira mogućnost slanja e-mail adrese, koja se evidentira u bazi podataka i na koju će biti moguće poslati obavještenje o otvaranju stranice. Stranicu krasi i mali slajd šou, implementiran na bazi jQuery dodatka Nivo Slider v. 2.3.
Pomoću njega možete napraviti zanimljiv efekat rotirajuće vizit karte kada kliknete na link.
Ideja je praćenje klikova korisnika. Da vidite dodatak u akciji na demo stranici, kliknite i zatim kliknite na dugme "Analiziraj". A na prozirnoj pozadini biće prikazane tačke na koje ste kliknuli mišem.
Implementacija lijepe tastature na ekranu. Nikad se ne zna, za nešto će ti dobro doći.
Implementacija letaka sa bilješkama. Tekst se može uređivati, a same bilješke mogu se brisati ili pomicati po ekranu. Da vidite primjer, idite na demo stranicu na karticu "Demo".
Zanimljiv dizajn linkova: kada pređete mišem preko veze, njeno sidro se mijenja. Izgleda cool.
Implementacija captcha za obrazac za registraciju. Dodatak je skup brojeva koje trebate postaviti u rastućem redoslijedu povlačenjem i ispuštanjem. Prilično zanimljiv način da se potvrdi da je registracija stvarna osoba, a ne robot.
Na dnu ekrana su prikazana dugmad koja se mogu koristiti za glatko pomicanje stranice gore ili dolje.
Dodatak koristi API za Google jezik i može prevesti tekst na bilo koji jezik koji pruža Google. Da biste preveli, potrebno je da kliknete na ikonu pored pasusa i sa padajuće liste izaberete jezik na koji želite da prevedete.
Odlična implementacija linkova koji se mogu pomicati za paginaciju. Implementirano korištenjem jQueryja.
Ovaj jQuery dodatak će vam omogućiti da implementirate "papirne" bilješke na vašoj web lokaciji.
Dodatak za kreiranje animiranog navigacionog lanca "Breadcrumbs"
jQuery dodatak za implementaciju stranice proizvoda. Kada kliknete na sliku proizvoda, pojavljuje se njen opis.
jQuery efekt vertikalnog pomicanja. Savršeno za implementaciju jednostranih web lokacija i portfelja. Da vidite efekat, kliknite na stavku menija na demo stranici.
jQuery efekat za implementaciju evaluacije nečega. Boja krugova i teksta ispod njih se mijenjaju ovisno o tome preko kojeg se nalazi kursor miša.
Dodatak koji implementira navigaciju web lokacije. U ovom slučaju, vaša stranica je predstavljena kao mreža dokumenata, između kojih se prijelaz vrši uz zanimljiv jQuery efekt.
Ovaj dodatak možete jednostavno koristiti za kreiranje malih web stranica i web aplikacija. Takođe, neće izgledati loše na portfolio sajtovima.
Indikator efektivnog opterećenja.
Prilikom popunjavanja polja, dodatak će predložiti moguće opcije za popunjavanje pomoću Ajaxa, dok će filtrirati i prikazati samo one opcije koje zadovoljavaju tekst koji je već unesen u polje.
Prije početka komunikacije posjetitelj mora unijeti svoj nadimak i e-mail. Desna kolona pokazuje koliko je ljudi prijavljeno na chat. Korišćene tehnologije: PHP, MySQL, jQuery, CSS.
Posjetioci mogu dodati novi prijedlog ili glasati za postojeći. Odlično rješenje za one koji žele znati mišljenje svoje publike o stranici. Također, ova stranica se može koristiti za prikupljanje novih ideja za daljnji razvoj vašeg projekta. Korišćene tehnologije: PHP, MySQL, jQuery, CSS
Precizno sprovođenje anketa na sajtu. Korišćene tehnologije: jQuery, Ajax, PHP i MySQL.
Vrlo zanimljivo rješenje za implementaciju glasanja na stranici. Povlačenjem blokova gore i dolje, hvatanjem slika mišem, možete ih rasporediti na stranici bilo kojim redoslijedom. Što više napustite blok, to je bolje ocijenjen i, shodno tome, ako je blok postavljen na samom dnu, znači da vam se najmanje svidio. Nakon što rasporedite blokove u željenom redosledu, morate kliknuti na dugme "Pošalji anketu" kako bi se glas uračunao. Stranica s rezultatima prikazuje rezultate glasanja i broj posjetilaca koji su glasali. Korišćene tehnologije: CSS, PHP, MySQL, jQuery.
Jednostavan Ajax sistem komentarisanja sa validacijom unesenih informacija. Komentari se pohranjuju u bazu podataka. Implementirano korišćenjem: PHP, MySQL, CSS, jQuery.
Korišćene tehnologije: PHP, jQuery, CSS.
Kada se krećete kroz stavke menija, sadržaj se učitava bez ponovnog učitavanja stranice. Korišćene tehnologije: PHP, jQuery, CSS.
Implementacija pretraživanja web stranice koristeći Google AJAX Search API. Posjetiocu ćete moći pružiti mogućnost pretraživanja i na vašoj web stranici i na internetu. Istovremeno, pretraživanje se može izvršiti ne samo na stranicama web-mjesta, već i na slikama i multimedijskim datotekama.
Vrlo zanimljiv efekat, može se koristiti u implementaciji portfolia. Kada kliknete na sliku, ona se zatamni prozirnom pozadinom, a pojavljuje se natpis s opisom na šta treba obratiti pažnju.
jQuery implementacija stranice FAQ na stranici. Lista pitanja je prikazana na vrhu stranice. Kada kliknete na pitanje, stranica se glatko skroluje do one koju ste odabrali, a aktivno pitanje s odgovorom na njega je istaknuto drugom bojom. Veza za povratak na listu pitanja također se pojavljuje u polju za aktivni odgovor.
Boja se mijenja kada zadržite pokazivač miša. Možete nasumično promijeniti boju.
Pomoću ovog zanimljivog dodatka možete posjetitelja upoznati s glavnim funkcijama vaše stranice ako je na nju došao prvi put. Kada se stranica učita, u gornjem desnom kutu iskače blok sa prijedlogom za obilazak stranice. Ako posjetitelj prvi put posjećuje vašu web stranicu, može koristiti mali vodič da upozna glavne karakteristike. U ovom slučaju, stranica je zatamnjena, a potrebni blokovi u svakom koraku su označeni oznakom. Ako je posjetitelj već posjetio vašu stranicu ranije, može jednostavno zatvoriti prozor koji nudi obilazak stranice.
Pomoću ovog dodatka posjetitelja možete upoznati sa glavnom funkcionalnošću stranice. Ovo se radi u obliku sekvencijalnog iskačućeg opisa elemenata. Posjetilac može vidjeti sve savjete klikom na dugme Sljedeće, ili zatvoriti online obilazak (ako je već prvi put došao na ovu stranicu) pomoću križića.
FABA je jquery dodatak za Facebook albume i galeriju fotografija koji će učitati sve albume i fotografije sa odabrane Facebook stranice.
Postoji oko 90 opcija koje možete urediti i možete prilagoditi gotovo sve: animacije, efekte lebdenja, svaki dio animacija pri lebdenju, tekst, ponašanja i još mnogo toga. Možete integrirati prekrasne albume u svoj projekat ili web stranicu.
xGallerify je lagani dodatak za galeriju koji vam omogućava da kreirate prekrasne galerije slika za vaše web stranice. Ovaj dodatak je lagan (3 kb veličine fajla), jednostavan za korištenje i dolazi s nizom prilagodljivih opcija i stilova.
Demo & Download
Instagram Element je vrhunski dodatak za Instagram za blogere, fotografe, modele i sve koji žele povećati svoje prisustvo na Instagramu.
Ovaj dodatak je potpuno prilagodljiv i omogućava vam jednostavno upravljanje sa 50+ opcija i omogućava vam da lijepo prikažete svoje fotografije na bilo kojem uređaju.
SnapGallery je jednostavan jQuery dodatak koji pretvara ružnu listu slika različite veličine u prekrasnu, prilagodljivu galeriju s jednom linijom JavaScripta.
Potpuno je prilagodljiv, prilagodljiv i omogućava vam da odaberete razmak između slika, minimalnu dozvoljenu širinu prije slaganja i maksimalan broj kolona, s više opcija na putu!
Demo & Download
Eagle Gallery ovo je moderna galerija sa funkcijom zumiranja slika. Za upravljanje galerijom možete koristiti pokrete ili kontrolne tipke. Ovo je potpuno responzivna galerija koja ima podršku za ekran osjetljiv na dodir i kreirana je za mobilne uređaje, laptope i desktope.
Pomoću ove galerije možete jednostavno kreirati galeriju proizvoda na vašoj internet prodavnici za detaljan pregled i prilagoditi je uz pomoć opcija.
Galerija Unite je višenamjenska JavaScript galerija zasnovana na jQuery biblioteci. Izgrađen je modularnom tehnikom s puno akcenta na jednostavnost korištenja i prilagođavanja. Vrlo je lako prilagoditi galeriju, mijenjajući njen izgled preko css-a, pa čak i pisati vlastitu temu. Ipak, ova galerija je vrlo moćna, brza i ima većinu današnjih mora imati karakteristike kao što su odziv, omogućen dodir, pa čak i funkcija zumiranja, to je jedinstveni efekat.
Demo & Download
jQuery lightGallery je lagana jQuery lightbox galerija za prikaz galerije slika i video zapisa.
Lightgallery podržava navigaciju dodirom i prevlačenjem na uređajima sa ekranom osetljivim na dodir, kao i prevlačenje mišem za desktop računare. Ovo omogućava korisnicima da se kreću između slajdova prevlačenjem ili povlačenjem miša.
Lightgallery dolazi s brojnim opcijama koje vam omogućavaju da vrlo lako prilagodite dodatak. Možete jednostavno prilagoditi izgled i osjećaj galerije ažuriranjem SASS varijabli.
Demo & Download
Ovo je još jedan sjajan dodatak za jQuery galeriju slika koji vam omogućava da kreirate galeriju rasporeda mreže za vaše slike i video zapise. Ovi dodaci su potpuno prilagodljivi i u paketu su sa brojnim funkcijama kao što su dijeljenje na društvenim mrežama, beskonačno pomicanje, css3 animacije, filteri i još mnogo toga.
blueimp Gallery je osjetljiva i prilagodljiva galerija slika i video zapisa, vrtuljka i lightbox, optimizirana za web pretraživače za mobilne i desktop računare, koja ima mogućnost dodira.
Poseduje navigaciju prevlačenjem, mišem i tastaturom, efekte prelaza, funkcionalnost prezentacije, podršku preko celog ekrana i učitavanje sadržaja na zahtev i može se proširiti za prikaz dodatnih tipova sadržaja.
Demo & Download
nanoGALLERY je galerija slika koja je omogućena dodirom i koja se odziva, s poravnatim, kaskadnim i mrežnim rasporedom. Podržava slike koje se sami hostuju i izvlačenje foto albuma Flickr, Picasa, Google+ i SmugMug.
Sadrži navigaciju na više nivoa u albumima, kombinovane efekte lebdenja na sličicama, prilagodljive veličine sličica, višestruke izglede, prikaz slajdova, cijeli ekran, paginaciju, lijeno učitavanje slika i još mnogo toga.
Demo & Download
flipGallery je besplatna jQuery galerija fotografija s elegantnim okretnim prijelazima između sličica i uvećanja u kutiji za pregled. Ostale karakteristike uključuju dinamički streaming slika, automatsku paginaciju, automatsko izrezivanje i transparentno preklapanje slike.
Ovaj dodatak također ima premium verziju koja dolazi sa nekoliko zgodnih funkcija i svakako uključuje odziv.
Demo & Download
Fancy Gallery je prilagodljivi jQuery dodatak za galeriju slika koji vam omogućava da prikažete svoje slike i video zapise u fensi stilu. Ovaj dodatak ima mnogo opcija za prilagođavanje i možete dodati neograničen broj albuma, videa, slika i još mnogo toga.
Dodatak dolazi sa različitim efektima lebdenja za sličice i naslove, koji se također mogu prilagoditi. Možete birati između 7 unaprijed definiranih tema boja ili jednostavno kreirati vlastitu temu boja.
Balanced Gallery je jQuery dodatak koji ravnomjerno raspoređuje fotografije po redovima ili kolonama, maksimalno iskorištavajući prostor. Fotografije se prema zadanim postavkama skaliraju na osnovu veličine elementa "kontejner", što Balanced Gallery čini dobrim izborom za responzivne web stranice.
Demo & Download
S Gallery koristi HTML5 API za cijeli ekran i uvelike se oslanja na dobrotu CSS3 animacija i CSS3 transformacije, tako da će raditi samo u pretraživačima koji podržavaju ove funkcije.
Demo & Download
Ovo je HTML | css | jQuery Grid sa Lightbox-om, možete odrediti sličice za mrežu i kada kliknete na nju da otvorite okvir za pregled, učitat će se normalna slika, možete odrediti tekst za natpise i za svjetlosno polje. Također ne morate učitavati sve slike odjednom (u svrhu performansi) tako da možete odrediti broj slika za učitavanje kada se prvi put učita i broj slika za učitavanje kada kliknete na dugme "učitaj više slika".
Responsive Thumbnail Gallery je jQuery dodatak za kreiranje galerija slika koje se prilagođavaju njihovom kontejneru.
Demo & Download
SuperBox je jQuery dodatak koji cijelu 'sliku' i 'lightbox' vodi 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 na koju možete kliknuti da biste otkrili punu verziju slike.
Demo & Download
Galerija Ultimate Thumbnail je dodatak za galeriju slika koji potpuno reagira i dolazi u dva tipa rasporeda (mreža i linija, okomito i horizontalno), sa pomicanjem (jScrollPane) ili navigacijom pomoću gumba. Kutije za sličice podržavaju bilo koji HTML element unutar njih.
Galerije slika i klizači su neki od najpopularnijih jQuery formata. Zahvaljujući njima, možete dodati potrebnu količinu vizuelnog sadržaja na stranicu, uz uštedu dragocjenog prostora.
Galerije i klizači čine stranicu manje pretrpanom, ali vam i dalje omogućavaju da dodate sve slike koje su vam potrebne za prenošenje poruke. Posebno će biti korisni za online trgovine.
U današnjem članku za vas smo zaokružili najbolje galerije slika i jQuery klizače.
Da biste ih instalirali, samo dodajte odabrane dodatke u glavni dio HTML stranice zajedno sa jQuery bibliotekom i konfigurirajte ih prema dokumentaciji (samo nekoliko linija koda).
Odaberite koji će se od ovih elemenata savršeno uklopiti u vaš projekt.
Bootstrap Slider je besplatni klizač slika optimiziran za mobilne uređaje sa pomicanjem dodirom i prevlačenjem. Izgledaće neverovatno na bilo kom ekranu i u bilo kom pretraživaču. Možete otpremati slike, video zapise, tekst, sličice i dugmad na klizače.
Klizač za pregled proizvoda utjelovljuje puni potencijal jQueryja, savršeno se uklapa u bilo koji interfejs. Također ćete biti zadovoljni kvalitetom i čistoćom koda ovog dodatka.
Proširiva galerija slika je neverovatan dodatak koji se pretvara u galeriju preko celog ekrana samo jednim klikom. Može se koristiti za odjeljak "O nama" ili za pregled informacija o proizvodu.
Fotorama je responzivni dodatak za jQuery galeriju koji radi i za desktop i za mobilne pretraživače. Nudi mnogo opcija za navigaciju: sličice, skrolovanje, dugmad za napred i nazad, automatske projekcije slajdova i markere.
Immersive Slider vam omogućava da kreirate jedinstveno iskustvo gledanja slajdova slično Google TV klizaču. Možete promijeniti sliku u pozadini tako da bude mutna kako biste zadržali fokus na glavnim fotografijama.
Leastjs je responzivni jQuery dodatak koji će vam pomoći da napravite nevjerovatnu galeriju. Kada pređete mišem preko slike, pojavljuje se tekst, a kada kliknete prozor se širi na cijeli ekran.
Ovaj dodatak je savršen za portfelje. Napravit će blokove slika koje su horizontalne (vertikalne na malim ekranima) na koje će se pričvrstiti odabrani sadržaj.
Squeezebox Portfolio Template nudi efekte pokreta portfelja. Kada zadržite pokazivač iznad glavne slike (ili bloka), pojavljuju se usidreni elementi.
Shuffle Images je nevjerojatan dodatak koji vam omogućava da kreirate galeriju sa slikama koje se mijenjaju pri lebdenju.
Besplatni jQuery Lightbox dodatak pomaže vam da prikažete jednu ili više slika na jednoj stranici. Također se mogu povećati i vratiti u prvobitnu veličinu.
PgwSlider je minimalistički klizač za slike. jQuery kod je mali, tako da će vas brzina učitavanja ovog dodatka ugodno iznenaditi.
Galerija Scattered Polaroids je nevjerovatan klizač ravnog dizajna. Njegovi elementi se nasumično pomeraju prilikom prebacivanja slika, što izgleda neverovatno.
Bouncy Content Filter je savršeno rješenje za vaš portfelj. Ovaj dodatak omogućava korisnicima da brzo prelaze iz jedne kategorije u drugu.
Jednostavan jQuery klizač opravdava svoje ime. Ovaj dodatak kombinuje elemente JavaScripta, HTML5 i CSS3. U demonstraciji je podrazumevano dostupno samo učitavanje teksta, ali uz nekoliko izmena može se dodati i vizuelni sadržaj.
Glide JS je jednostavan, brz i brz jQuery klizač. Lako se postavlja i dodatak neće zauzimati puno prostora.
Ovaj nevjerovatan jQuery klizač za učitavanje slika i teksta savršen je za bilo koju web stranicu. Oduševit će korisnike laganim efektom paralakse i sporim izgledom teksta.
Pozdrav dragi čitaoci a! U ovom tutorijalu pokazat ću vam kako da napravite minimalistički, ali istovremeno udoban i funkcionalan jQuery foto galerija, ili galeriju slika, kako želite. Galerija ima mogućnost kreiranja kategorija, nakon čega slijedi filtriranje. Također je moguće pokrenuti projekciju slajdova. Galerija radi u svim pretraživačima, tako da neće biti problema sa adaptacijom.
Za kreiranje ove galerije koristit će se dvije besplatne biblioteke: živi pijesak i PrettyPhoto. Oni uvelike pojednostavljuju izradu galerije. Kao i uvijek, rezultat rada možete vidjeti na demo stranici, kao i preuzeti arhivu iz radne galerije i sve izvorne datoteke. Jedina negativna, ako mogu tako reći, je ručno kreiranje sličica za velike slike. Za sve ostalo, ovo galerija vrijedan pažnje. Kao i !
Prvo, analizirajmo panel sa listom kategorija, ovo je lista sa nabrajanjem ul . Štaviše, svaki element liste mora imati jedinstveno ime klase.
1 |
Kao što je gore spomenuto, stavke liste su slike u galeriji. Svaki element liste uključuje komponente. Ovo je sama slika, odnosno njena sličica, kao i opis. Sličica je veza do glavne slike. Atribut rel je potreban za pozivanje javascripta i otvaranje glavne slike.
Ne zaboravite također na 2 važne stvari, element li liste mora imati jedinstveni data-id atribut. Atribut tipa podataka sadrži klasu kategorije, čiju sam listu gore opisao. Čini se da se sve vrti oko markiranja.
Neću se fokusirati na stilove, jer koristimo gotovu biblioteku PrettyPhoto, koji je odgovoran za povećanje slike, a ima i dosta css koda. Međutim, vrijedno je napomenuti da postoji 5 opcija dizajna za uvećanu sliku, iako je idealno samo 3, jer se u dvije opcije zaokruživanje uklanja samo.
Stoga ću prikazati samo CSS stilove za sličice i listu kategorija.
1 | Portfolio-categ ( margin-bottom : 30px ; ) |
U principu, sve bi trebalo biti jasno sa stilovima. Da bi se kategorije poredale, svojstvo prikaza je postavljeno na inline . Da bi se slici dao efekat poteza, postavljena je boja pozadine (bijela) i padding od 10 piksela. Veličine stavki liste su postavljene u .portfolio-area li .
I na kraju, ono najvažnije, zbog čega je čitava lekcija. Ovo je jQuery kod. Počnimo s filtriranjem slika po kategorijama.
1 | // Odaberite sve podređene elemente portfolio-područja i upišite u varijablu $(".portfolio-categli" ) .kliknite (funkcija (e) ( var filterClass= $(this ) .attr ("class" ) .split (" " ) .slice (- 1 ) [ 0 ] ; if (filterClass == "sve" ) ( LightboxPhoto() ; |
Koristeći metodu clone() i selektor, biramo sve potomke .portfolio-area i upisujemo ih u varijablu $data. Zatim pratimo klik na jednu od kategorija, li element liste sa .portfolio-categ klasom. Sve kategorije činimo neaktivnim uklanjanjem removeClass("active"), ako se to ne učini, onda će s vremenom sve kategorije biti aktivne i filtriranje će prestati.
Pošto kliknemo na element liste, selektor this sadrži element liste, tj. li , iz njega uzimamo vrednost atributa klase i koristimo metodu split da podelimo ime klase na nekoliko delova, granica je razmak (tj. ako je klasa bila “sva aktivna” onda nakon razdvajanja dobijamo niz “sve” i “aktivne”). Zatim, koristeći metodu slice, odabiremo prvi element niza (u našem slučaju, "sve") i zapisujemo rezultirajući rezultat u varijablu filterClass. Ako nije bilo razmaka, naziv klase se neće promijeniti.
Zatim provjeravamo da li je string u varijabli filterClass sve, zatim pomoću .find metode biramo sve elemente sa klasom portfolio-item2 iz niza $data, koji smo razmotrili iznad. Odabrani elementi (a to su svi elementi liste, odnosno sve slike) stavljaju se u varijablu filteredData.
Inače, ako filterClass nije jednak sve, tada ćemo u varijablu filterData staviti ne sve elemente liste, već samo one čiji atribut tipa podataka odgovara klasi kategorije. Ukratko, elementi samo jedne kategorije.
I konačno, rezultujuću varijablu prosljeđujemo biblioteci jquery quicksand, koji vrši filtriranje slike. Sve je u filtriranju.
Sada, u vezi zumiranja slike u iskačućem prozoru. Ovdje je sve mnogo jednostavnije.
1 | jQuery("a") .prettyPhoto (( |
Prati klik na link čiji atribut rel počinje sa prettyPhoto. Tada na scenu stupa biblioteka. prettyPhoto, a slika se čudesno uvećava. Usput, prenosimo i nekoliko parametara. Kao što je brzina animacije velika, kašnjenje u slajd šou je 5 sekundi, Facebook tema (ima ih ukupno 5, nalaze se u folderu slike/lepa fotografija), a takođe zabranjujemo prikazivanje naziva slike i povećanje sliku na lebdenju. Kompletna dokumentacija za prettyPhoto može se naći
Da budete u toku sa najnovijim člancima i lekcijama, pretplatite se na
