1. Izvrsna jQuery dijaprojekcija
Velika, spektakularna dijaprojekcija pomoću jQuery tehnologije.
2. jQuery dodatak “Scale Carousel”
Skalabilni prikaz slajdova pomoću jQueryja. Možete postaviti veličine dijaprojekcije koje vam najviše odgovaraju.
3. jQuery dodatak “slideJS”
Klizač slike s tekstualnim opisom.
4. Dodatak “JSliderNews”
5. CSS3 jQuery klizač
Kada zadržite pokazivač iznad navigacijskih strelica, pojavljuje se kružna sličica sljedećeg slajda.
6. Zgodan jQuery klizač "Prezentacijski ciklus".
jQuery klizač s indikatorom učitavanja slike. Omogućeno je automatsko mijenjanje slajdova.
7. jQuery dodatak “Parallax Slider”
Klizač s volumetrijskim efektom pozadine. Vrhunac ovog klizača je kretanje pozadine, koja se sastoji od nekoliko slojeva, od kojih se svaki pomiče različitom brzinom. Rezultat je imitacija volumetrijskog učinka. Izgleda jako lijepo, možete vidjeti i sami. Učinak se lakše prikazuje u preglednicima kao što su Opera, Google Chrome, IE.
8. Svježi, lagani jQuery klizač “bxSlider 3.0”
Na demo stranici u odjeljku "primjeri" možete pronaći poveznice na sve moguće upotrebe ovog dodatka.
9. jQuery klizač slike, “slideJS” dodatak
Elegantni jQuery klizač svakako može ukrasiti vaš projekt.
10. jQuery dodatak za dijaprojekciju “Easy Slides” v1.1
Lako koristeći JQuery dodatak za izradu dijaprojekcija.
11. jQuery Slidy dodatak
Lako jQuery dodatak u raznim izvedbama. Omogućeno je automatsko mijenjanje slajdova.
12. jQuery CSS galerija s automatskom izmjenom slajdova
Ukoliko posjetitelj u određenom vremenu ne klikne na strelicu “Naprijed” ili “Natrag”, galerija će se automatski početi pomicati.
13. jQuery klizač “Nivo klizač”
Vrlo profesionalan, kvalitetan, lagan dodatak s valjanim kodom. Postoji mnogo različitih efekata prijelaza slajdova.
14. jQuery klizač “MobilySlider”
Svježi klizač. jQuery klizač s raznim efektima mijenjanja slike.
15. jQuery dodatak “Slider²”
Lagani klizač s automatskim izmjenjivačem slajdova.
16. Svježi javascript klizač
Klizač s automatskom promjenom slike.
Dodatak za implementaciju dijaprojekcija s automatskom izmjenom slajdova. Moguće je upravljati prikazom pomoću minijatura slika.
jQuery CSS klizač slike pomoću dodatka NivoSlider.
19. jQuery klizač “jShowOff”
Dodatak za rotaciju sadržaja. Tri mogućnosti korištenja: bez navigacije (s automatskom promjenom formata slide showa), s navigacijom u obliku gumba, s navigacijom u obliku minijatura slika.
20. Dodatak “Shutter Effect Portfolio”.
Svježi jQuery dodatak za dizajniranje portfelja fotografa. Galerija ima zanimljiv efekt izmjene slika. Fotografije slijede jedna drugu s učinkom sličnim radu zatvarača objektiva.
21. Lagani javascript CSS klizač “TinySlider 2”
Implementacija klizača slike pomoću javascripta i CSS-a.
22. Sjajan klizač “Tinycircleslider”
Moderan okrugli klizač. Prijelaz između slika provodi se povlačenjem klizača u obliku crvenog kruga po obodu. Savršeno će se uklopiti u vašu web stranicu ako u dizajnu koristite okrugle elemente.
23. Klizač slike s jQueryjem
Lagani klizač “Slider Kit”. Klizač je dostupan u različitim izvedbama: okomito i vodoravno. Implementirane su i različite vrste navigacije između slika: pomoću gumba "Naprijed" i "Natrag", pomoću kotačića miša, pomoću klika mišem na slajd.
24. Galerija minijatura “Slider Kit”
Galerija "Slider Kit". Pomicanje sličica vrši se okomito i vodoravno. Prijelaz između slika vrši se pomoću: kotačića miša, klika mišem ili prelaskom pokazivača iznad minijature.
25. jQuery klizač sadržaja “Slider Kit”
Okomiti i vodoravni klizač sadržaja pomoću jQueryja.
26. jQuery dijaprojekcija “Slider Kit”
Prikaz slajdova s automatskom izmjenom slajdova.
27. Lagani profesionalni javascript CSS3 klizač
Zgodan jQuery i CSS3 klizač stvoren 2011.
jQuery dijaprojekcija sa sličicama.
29. Jednostavna jQuery dijaprojekcija
Dijaprojekcija s navigacijskim gumbima.
30. Sjajan jQuery “Skitter” dijaprojekcija
jQuery Skitter dodatak za stvaranje zadivljujućih dijaprojekcija. Dodatak podržava 22 (!) Vrste različitih animacijskih efekata pri promjeni slika. Može raditi s dvije opcije navigacije slajdova: pomoću brojeva slajdova i pomoću minijatura. Obavezno pogledajte demo, vrlo kvalitetan nalaz. Korištene tehnologije: CSS, HTML, jQuery, PHP.
31. Slideshow “Awkward”
Funkcionalni dijaprojekcija. Slajdovi mogu biti: jednostavne slike, slike s natpisima, slike s opisima alata, video zapisi. Za navigaciju možete koristiti strelice, veze s brojevima slajdova i tipke lijevo/desno na tipkovnici. Slide show dolazi u nekoliko verzija: sa i bez sličica. Za pregled svih opcija, slijedite poveznice Demo #1 - Demo #6 koje se nalaze na vrhu demo stranice.
Vrlo originalan dizajn za klizač slike, koji podsjeća na ventilator. Animirani prijelaz slajdova. Kretanje između slika vrši se pomoću strelica. Tu je i automatski mjenjač koji se može uključiti i isključiti tipkom Play/Pause koja se nalazi na vrhu.
Animirani jQuery klizač. Pozadinske slike automatski skalirati kada se promijeni veličina prozora preglednika. Za svaku sliku pojavljuje se blok s opisom.
34. Klizač “Flux Slider” koristeći jQuery i CSS3
Novi jQuery klizač. Nekoliko zgodnih animiranih efekata prilikom mijenjanja slajdova.
35. jQuery dodatak “jSwitch”
Animirana jQuery galerija.
Jednostavan jQuery prikaz slajdova s automatskom izmjenom slajdova.
37. Nova verzija dodatka “SlideDeck 1.2.2”
Profesionalni klizač sadržaja. Postoje opcije s automatskom izmjenom slajdova, kao i opcija pomoću kotačića miša za pomicanje između slajdova.
38. jQuery klizač “Sudo Slider”
Lagani klizač za slike pomoću jQueryja. Postoji mnogo mogućnosti implementacije: vodoravna i okomita promjena slika, sa i bez poveznica na broj slajda, sa i bez naslova slike, različiti efekti promjene slike. Postoji funkcija automatske promjene slajdova. Veze na sve primjere implementacije mogu se pronaći na demo stranici.
39. jQuery CSS3 dijaprojekcija
Dijaprojekcija sa sličicama podržava način automatskog mijenjanja slajdova.
40. jQuery klizač “Flux Slider”
Klizač s mnogo efekata mijenjanja slike.
41. Jednostavan jQuery klizač
Elegantan klizač slika koji koristi jQuery.
autora Dmitrija Semenova
je jQuery dodatak za galeriju slika i klizač sadržaja. Potpuno je responzivan, prilagođen dodiru i ima modularnu arhitekturu koja vam omogućuje uključivanje samo značajki koje su vam potrebne za optimizaciju veličine datoteke i performansi.
od Andyja – The Coffeescripter
Vrlo prilagodljiv dodatak za galeriju/izlog za jQuery.
od Trent
Galleriffic je jQuery dodatak koji pruža bogato iskustvo bez povratne objave optimizirano za rukovanje velikom količinom fotografija uz očuvanje propusnosti.
Tonic Gallery - jQuery XML Portfolio Gallery | 6 dolara
od Aino
Galleria je JavaScript okvir za galeriju slika izgrađen na temelju jQuery biblioteke. Cilj je pojednostaviti proces stvaranja profesionalnih galerija slika za web i mobilne uređaje.
od strane CatchMyFame
Neki dan sam tražio jednostavan način pomoću jQueryja za izbljeđivanje niza slika na stranici. Dakle, budući da sam koder, odlučio sam stvoriti vlastiti dodatak.
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 mali i jednostavan php/javascript online fotografija galerija, koju pokreće AJAX koji vam omogućuje jednostavno prikazivanje vaših slika na mreži, bez složenih baza podataka ili kodiranja, što vam omogućuje da imate aktivnu galeriju u nekoliko minuta.
autora Caspara Davida Friedricha
EOGallery je web animirana galerija slajdova napravljena pomoću jQueryja. Koristi samo osnovne jQuery funkcije i Cody Lindleyjev Thickbox za prikaz većih slika.
autora Arnaulta Pachota
Vrtuljak s više formata za jQuery, nesmetan i pristupačan portfelj koji podržava više medija: fotografije, video (flv), audio (mp3). Ovaj dodatak za jQuery automatski će otkriti ekstenziju svakog medija i primijeniti prilagođeni player.
Zid – Galerija medija – pokreće jQuery | 5 dolara
od Stefana Petrea
Još jedan dodatak za galeriju slika s efektom prostora, vrlo lagan i jednostavan dodatak.
autora Morena Di Domenica
jmFullWall je jQuery dodatak za stvaranje impresivnog portfelja.
napisao Fabrizio Calderan
Mosaiqy je jQuery dodatak za pregledavanje i zumiranje fotografija koji radi na Operi 9+, Firefoxu 3.6+, Safariju 3.2+, Chromeu i IE7+. Fotografije se dohvaćaju iz JSON/JSONP podatkovne strukture i nasumično premještaju unutar mreže. Sve skupe animacije preuzima vaš GPU na novijim preglednicima pomoću CSS3 prijelaza, smanjujući opterećenje CPU-a.
od Codyja
Sljedeći jQuery dodatak pretvara skup slika u malenu galeriju s nekoliko opcija. Galerija mikro slika omogućuje prebacivanje između mrežnog prikaza koji prikazuje pretpregled slika u obliku minijatura i pojedinačnog prikaza koji prikazuje samo jednu sliku.
VION – jQuery dodatak za galeriju slika | 7 dolara
od strane Malihua
Jednostavna, ali elegantna galerija slika na cijelom zaslonu stvorena pomoću okvira jQuery i malo jednostavnog CSS-a.
Vrijeme ne stoji i s njim napreduje. To je utjecalo i na Internet. Već možete vidjeti kako se mijenja izgled web stranica, posebno je popularan responzivni dizajn. I u tom smislu pojavilo se dosta novih prilagodljivi jquery klizači, galerije, vrtuljke ili slične dodatke.
1. Responzivni vodoravni klizač postova
Adaptivni horizontalni vrtuljak s detaljnim uputama za montažu. Izrađen je u jednostavnom stilu, ali ga možete stilizirati kako vam odgovara.
2. Klizač na Glide.js
Ovaj klizač prikladan je za bilo koje web mjesto. Koristi Glide.js sa otvoreni izvor. Boje klizača mogu se jednostavno mijenjati.
3. Nagnuti dijaprojekcija sadržaja
Responzivni klizač sadržaja. Vrhunac ovog klizača je 3D efekt slika, kao i različite animacije nasumičnog pojavljivanja.
4. Klizač pomoću HTML5 platna
Vrlo lijep i impresivan klizač s interaktivnim česticama. Napravljen je pomoću HTML5 platna,
5. Klizač za preoblikovanje slike
Klizač s efektom morfiranja (glatka transformacija iz jednog objekta u drugi). U ovom primjeru, klizač je vrlo prikladan za portfelj web programera ili web studija u obliku portfelja.
6. Kružni klizač
Klizač u obliku kruga s efektom okretanja slike.
7. Klizač s zamućenom pozadinom
Prilagodljivi klizač s prebacivanjem i zamućenjem pozadine.
8. Responzivni modni klizač
Jednostavan, lagan i responzivan klizač web stranice.
9. Slicebox - klizač jQuery 3D slike(AŽURIRANO)
Ažurirana verzija klizača Slicebox s popravcima i novim značajkama.
10. Besplatna animirana responzivna slikovna mreža
Dodatak JQuery za stvaranje fleksibilne rešetke slika koja će izmjenjivati snimke pomoću različitih animacija i vremena. To može izgledati dobro kao pozadina ili ukrasni element na web stranici, jer možemo selektivno prikazati nove slike i njihove prijelaze. Dodatak dolazi u nekoliko verzija.
11. Flex klizač
Univerzalni besplatni dodatak za vašu web stranicu. Ovaj dodatak dolazi u nekoliko opcija klizača i vrtuljka.
12. Okvir za fotografije
Fotorama- Ovo univerzalni dodatak. Ima puno postavki, sve radi brzo i jednostavno, a slajdove možete gledati na cijelom ekranu. Klizač se može koristiti u fiksnoj veličini i prilagodljivo, sa ili bez minijatura, sa ili bez kružnog pomicanja i još mnogo toga.
p.s.Ugradio sam slajder nekoliko puta i mislim da je jedan od najboljih
13. Besplatna i prilagodljiva 3D klizna galerija sa sličicama.
Eksperimentalni klizač galerije 3DPanelLayout s rešetkom i zanimljivim efektima animacije.
14. Klizač na css3
Prilagodljivi klizač izrađen je pomoću css3 s glatkim izgledom sadržaja i laganom animacijom.
15. WOW klizač
WOW klizač je klizač za slike s nevjerojatnim vizualnim efektima.
17. Elastični
Elastični klizač s punim odzivom i sličicama slajdova.
18. Prorez
Ovo je klizač koji reagira na cijelom zaslonu i koristi css3 animaciju. Klizač se izrađuje u dvije verzije. Animacija je napravljena dosta neobično i lijepo.
19. Adaptivna fotogalerija plus
Jednostavan besplatni galerijski klizač s učitavanjem slika.
20. Responzivni klizač za WordPress
Prilagodljivi besplatni klizač za WP.
21. Klizač sadržaja paralakse
Klizač s efektom paralakse i kontrolom svakog elementa pomoću CSS3.
22. Klizač s glazbenom vezom
Klizač pomoću otvorenog izvorni kod JPlayer. Ovaj klizač podsjeća na prezentaciju s glazbom.
23. Klizač s jmpress.js
Responzivni klizač temelji se na jmpress.js i stoga će vam omogućiti dodavanje zanimljivih 3D efekata vašim slajdovima.
24. Dijaprojekcija brzog lebdenja
Prikaz slajdova s brzim prebacivanjem slajdova. Klizni prekidač pri lebdenju.
25. Slika Harmonika sa CSS3
Harmonika slike pomoću css3.
26. Dodatak za galeriju optimiziran dodirom
Ovo je responzivna galerija koja je optimizirana za uređaje osjetljive na dodir.
27. 3D galerija
3D zidna galerija- stvoreno za preglednik Safari, gdje će 3D efekt biti vidljiv. Ako ga pogledate na drugom pregledniku, funkcionalnost će biti u redu, ali 3D efekt neće biti vidljiv.
28. Klizač s paginacijom
Responzivni klizač s označavanjem stranica pomoću JQuery UI klizača. Ideja je koristiti jednostavan koncept navigacije. Moguće je premotavati sve slike unatrag ili mijenjati slajd po slajd.
29. Montaža slike s jQueryjem
Automatski rasporedite slike ovisno o širini zaslona. Vrlo korisna stvar pri razvoju portfolio web stranice.
30. 3D galerija
Jednostavan 3D kružni klizač koji koristi css3 i jQuery.
31. Način rada preko cijelog zaslona s 3D efektom koristeći css3 i jQuery
Klizač s mogućnošću pregledavanja slika preko cijelog zaslona s prekrasnim prijelazom.
Vjerojatno je svaki programer naišao na nalog za stvaranje i organiziranje portfelja. Osobno jako volim takve narudžbe, jer kupac želi nešto originalno, a za to je potrebna mašta i kreativna spretnost. Ne znam za vas, ali ja ne želim izrađivati iste predloške za sve kupce. Morate napraviti dizajn, prijatelji moji, takav da ga se ne sramite. Uostalom, ako vaša kreacija, u u ovom slučaju, na primjer, vaš će portfelj zadiviti kupca, a onda će vas vjerojatno preporučiti svojim prijateljima. I to će vam samo koristiti.
IZVORI
U ovom vodiču ćemo pogledati vrlo zanimljiv način implementacije galerije minijatura za portfelj. Bez sumnje, ova galerija može se koristiti ne samo za portfelj, već i za druge kreativne projekte. Dakle, počnimo.
Korak 1. HTML
Moramo napraviti popis u obrascu nesređeni popis, i sve to zamotajte u jedan Div element, ovaj omot će se koristiti za prikaz mreže sličica slika, stilovi će se kreirati pomoću javascripta, tako da će css biti vrlo jednostavan. U ovom vodiču koristim nevjerojatne slike iz driblati objavio Troy Cummings:
Sadržat ćemo atribute naslova za slike, sljedeći kod je rezultat konstruiranja generiranog označavanja pomoću JavaScripta:
Markacije smo, nadam se, donekle sredili, idemo na sljedeći korak.
Korak 2: CSS
Naše će slike biti prikazane u rešetki, moramo postaviti opće parametre za konstrukciju mreže, dodati malo prozirnog raspona crne pozadine, sjene, Također ćemo postaviti prikaz na nijedan.
#portfolio-item ( display: none; ) #portfolio ( margin: 2em 0 1em; transform-style: Save-3d; ) #portfolio div ( display: inline-block; position: relative; vertical-align: top; margin: 1em; širina: 200px; visina: 150px; box-shadow: 0px 0px 25px rgba(0,0,0,.3); ) #portfolio div span (tekst-align: lijevo; pozicija: apsolutna; boja: #fff; pozadina: rgba(0,0,0,0.6); širina: 90px; ispuna: 5px 15px 7px; z-indeks: 1; lijevo: -10px; dolje: 10px; )
Moramo dodati klasu animacije koja će se koristiti prilikom prelaska na drugu stranicu. Rotirat ćemo slike za 360 stupnjeva. u odnosu na osi X i Y.
Animirano (prijelaz: .9s lagano-out;) .okrenuto-horizontalno-desno ( transformacija: rotateY(360deg); ) .okrenuto-vodoravno-lijevo ( transformacija: rotacijaY(-360deg); ) .okrenuto-okomito-vrh ( transformacija : rotateX(360deg); ) .flipped-vertical-bottombottom (transformacija: rotateX(-360deg); )
Korak 3: JavaScript
Prvo moramo definirati neke navigacijske varijable:
navigation.on("klik", funkcija(e) ( e.preventDefault(); navigation.removeClass("odabrano"); $(ovo).addClass("odabrano"); stranica = $(ovo).attr(" data-stranica"); for(var i = 0; i<= indexedItemShow; i++) { random = Math.floor(Math.random() * (3 - 0 + 1)); animation = rotation; item = itemWrapper.children("div:eq(" + i + ")"); item.addClass("animated " + animation); } });
Kada kliknete na stavke, pojavit će se animacija i izbor slika:
window.setTimeout(funkcija (index) ( return funkcija () ( indexReal = (stranica == 1) ? index: (index + (stranica - 1)) ; itemHost = indexReal + (indexedItemShow * (stranica - 1)); itemImage = itemList.children("li:eq(" + itemHost + ")").children("img"); itemSrc = itemImage.attr("src"); itemAlt = itemImage.attr("alt"); itemCurrent = itemWrapper.children("div:eq(" + index + ")"); itemCurrent.css("background", "url(" + itemSrc + ")"); itemCurrent.children("span").text(itemAlt ); ); ) (i), 500);
To je sve. Spreman!
Materijal je preuzet iz stranih zemalja i predstavljen je samo u informativne svrhe.
Dodaci za jQuery portfelj omogućuju vam da prikažete svoj portfelj u elegantnom stilu i pomažu vam da impresionirate svoje klijente kako biste dobili veću izloženost i poslovne dogovore.
Ne možete podcijeniti moć portfelja ako radite u sektoru pružanja usluga. Portfelji ne prikazuju samo vaš rad, već vašem klijentu daju predodžbu o vašem radnom iskustvu što rezultira većim brojem poslova i poslova.
U nastavku ćete pronaći neke od najboljih dodataka za jQuery portfelj za prikaz svojih umjetničkih djela na mreži. Ako znate za bilo koji drugi dodatak, javite nam da bismo rado ažurirali popis.
1. Mjesečev
Lunar – Photography Portfolio, vrlo čist i jednostavan jQuery dodatak koji vam pomaže da napravite prekrasne foto albume. Neke od jakih strana dodatka su: potpuno responzivna mreža, visoke performanse, moderan izgled i dojam, čist i prostran dizajn.
2. Portfolio kocke
3. Portfelj Media Boxesa
Media Boxes Portfolio je istaknuti dodatak za jQuery grid koji vam omogućuje prikaz svih vrsta sadržaja u vrlo moćnoj mreži. Koristite ga za postove na blogu, medije za prikaz, klijente, portfelje, kolica za kupnju, galerije i sve što možete zamisliti.
4. Colio
Ideja Colio – jQuery Portfolio Content Expander Plugin je prikazati pojedinosti o stavkama vašeg portfelja na istoj stranici u obliku proširivog okvira za prikaz koji se može prikazati iznad, ispod ili unutar mreže vašeg portfelja. Colio uključuje crno-bijelu temu za brzi početak i može se jednostavno integrirati u postojeći portfelj. Također je kompatibilan s popularnim dodacima za filtriranje kao što su izotop i živi pijesak i radi na tabletima i mobilnim uređajima.
Demo i preuzimanje
5. ZoomFolio
DZS ZoomFolio je ultimativni dodatak za prikazivanje vašeg kreativnog portfelja vašim klijentima, a to nije sve. Možete ga koristiti za prikaz nedavnih postova s vašeg bloga ili galerije s vašeg odmora.
Demo i preuzimanje
6. Metro
Metro – jQuery Grid Portfolio, vrlo čist i jednostavan jQuery dodatak koji prikazuje vaš portfelj na interaktivan način. Neke od jakih strana dodatka su: potpuno responzivna mreža, jednostavno postavljanje, visoke performanse, moderan izgled i dojam, čist i prostran dizajn.
7. Mreže portfelja
Ova stavka dolazi s više od 40 super prilagodljivih izgleda i 19 stilova lebdenja na izbor. Tone opcija spremnih za korištenje olakšavaju dodavanje obruba, pozadina, različitih meta stilova i tako dalje. S ovom velikom količinom funkcionalnosti spremnih za korištenje možete jednostavno izraditi sve vrste portfelja ili popisa galerija.
Demo i preuzimanje
8. Bootfolio
bootFolio je najlakša skripta za filtriranje portfelja sa css3 animacijom. visoko je optimiziran za bootstrap i vrlo jednostavan za korištenje. Bootfolio dolazi sa 76+ rasporeda stavki portfelja, 14 zamjenskih animacija, 167+ efekata lebdenja nad stavkama, lagan, vrlo prilagodljiv i još mnogo toga.
Demo i preuzimanje
9. Galerija Tonika
Tonic Gallery vam omogućuje vrlo jednostavnu izradu galerije portfelja s lijepim efektima i fleksibilnim postavkama prilagodbe. Ovaj dodatak uključuje mnoštvo opcija kao što su označavanje stranica, filtar kategorija, upravljanje podacima, pregled okvira za pregled i fleksibilnu konfiguraciju.
10. Mini
11. Alfred
Alfred pomaže web programerima da naprave najbolje portfelje i najljepše galerije. Dramatično pojednostavljuje cijeli proces i nudi vam širok raspon značajki i opcija.
12. jQuery stablo galerije portfelja
To znači da svaka galerija može imati jednu ili više podgalerija. Savršeno je prikladan za galeriju portfelja. Potpuno je responzivan i također se može koristiti u druge svrhe poput navigacije, galerija itd. Ovaj dodatak ima responzivan dizajn, 5 izgleda, kompatibilan je s preglednikom, inspiriran metroom i iOS7.