Share
Dispozitivele jQuery oferă un mod simplu, elegant de afișare a conținutului fără a renunța la proprietăți imobiliare valoroase pe pagina dvs. web. Au crescut în popularitate și pot fi folosite într-o varietate de moduri. Să trecem peste stilurile populare, alegând un slider și integrând unul într-un site demo.
Odată cu trecerea timpului, o imagine pe web tocmai avea o modalitate de a apărea: ca un ecran plat, GIF sau PNG. Câteva ani în urmă, imaginile au început să învețe trucuri noi; Au grupat împreună și au început să apară în glisierele jQuery la aplauzele vizitatorilor din jur.
De atunci, ei au învățat o mulțime de trucuri noi care le fac prime material pentru orice web designer. Indiferent dacă le-ați folosit înainte sau nu, acest tutorial vă va oferi o perspectivă asupra diferitelor arome ale glisoarelor, când să le utilizați într-un design și vă vom trece chiar printr-o instalare a unui.
Dacă există un singur lucru pe care glisoarele jQuery nu le au, este un nume consistent. Glisorul trece printr-o gamă largă de pseudonime: galerie, carusel, promos și rotatoare, dar toate oferă aceeași caracteristică generală - afișarea mai multor elemente de conținut într-un spațiu partajat al paginii. În scopul acestui articol, mă voi referi la ei ca pe un "glisor".
Dispozitivele jQuery pot fi folosite pentru aproape orice, dar cele mai multe sunt utilizate pentru a afișa un număr de fotografii într-un format de prezentare de diapozitive într-un mod anterior gestionat de Adobe Flash. Multe dintre ele oferă un număr de efecte de tranziție între diapozitive și pot fi controlate de butoanele anterioare / următoare, de navigare prin tab-uri sau miniaturi.
Numărul și varietatea de glisoare continuă să crească constant, astfel că găsirea unui glisor pentru a se potrivi nevoilor dvs. nu a fost niciodată mai ușoară. Ele vin în toate formele, dimensiunile și dimensiunile - un număr dintre ele sunt gratuite, ceea ce înseamnă că atunci când plătiți un cursor, este de obicei încărcat cu caracteristici extraordinare.
Permiteți să parcurgeți câteva dintre cele mai populare stiluri de glisoare de mai jos. Rețineți că majoritatea exemplelor prezentate sunt de la versiunile demostrice nemodificate și toate pot fi personalizate cu câteva cunoștințe CSS de bază și citirea documentației.
Un stil foarte popular al cursorului este sliderul de fotografie. Mulți acceptă o imagine și unele metadate, cum ar fi o subtitrare, adesea trasă automat din tag-ul alt sau titlu.
avantaje: În mod obișnuit, cel mai ușor pentru a începe cu pentru începători. Focalizarea este pusă direct pe o imagine mare pe care o alegeți. Mulți au efecte de tranziție multiple între diapozitive de la alunecare, decolorări, zoomuri și multe altele.
Dezavantaje: Dacă aveți o varietate largă de conținut pe care trebuie să-l afișați, cum ar fi HTML, imagini sau video, un slider de conținut mixt poate fi o alegere mai bună - majoritatea necesită să rămâneți la imaginile.
Deși similare cu glisorul pentru fotografie, glisoarele cu conținut mixt vă permit să utilizați mai mult decât imaginile. Examinați toate opțiunile atunci când alegeți un cursor de imagine, unele permit HTML, dar este posibil să nu fie listate în lista de caracteristici principale.
avantaje: Perfect pentru afișarea conținutului video, HTML și al imaginii în același glisor, dacă este necesar.
Dezavantaje: Glisoarele cu conținut mixt pot fi un pic mai avansate pentru a lucra cu decât glisorul de fotografie standard.
Stilul galeriei este adesea folosit în aplicațiile de fotografiere. Navigarea este adesea alcătuită din miniaturi pentru a naviga prin imaginile din colecția dvs..
avantaje: Foarte ușor pentru utilizatori să navigheze prin imaginile pe care doresc să le vadă rapid.
Dezavantaje: De multe ori ocupă mai multe imobile pe pagină decât un glisor standard pentru a se potrivi imaginii și tuturor miniaturilor.
Gândiți-vă la un cub Rubik, construit pe internet, fără toate durerile de cap. Acesta este în esență ceea ce este un Slider 3D Block - este incredibil de impresionant din punct de vedere vizual și poate fi perfect pentru a adăuga acel pic de emoție într-un site.
avantaje: Unul dintre cele mai uimitoare glisante de acolo. Dacă vizitatorii nu l-au mai văzut înainte, falcile lor s-ar putea lovi de podea.
Dezavantaje: În timp ce restul glisoarelor din acest tutorial sunt jQuery, cele mai multe Slide 3D Block sunt construite într-o combinație de Adobe Flash și XML ... care nu este cel mai "standard prietenos" format de folosit. Aceste glisoare pot necesita un pic mai mult timp pentru a "preload"; Deoarece sunt construite cu Flash, înseamnă că ele pot fi puțin mai greu de instalat dacă nu sunteți familiarizat cu acesta.
Inspirat de efectul fluxului de acoperire al Apple, acest efect al cursorului este o modalitate uimitoare de a vă afișa munca. Când este cuplat cu un site de stil minimal, acest glisor se poate simți ca acasă.
avantaje: Acest stil poate fi un mod foarte impresionant și foarte interactiv pentru ca utilizatorii să navigheze într-o galerie de imagini care vă prezintă munca.
Dezavantaje: Mulți au o mică bară de defilare sau folosesc rotița sau tastatura de derulare a mouse-ului pentru a vizualiza imaginile care pot fi puțin ciudate cu derulare neintenționată.
Glisorul de dimensiune completă este ceea ce pare - un cursor care ocupă întreaga pagină pentru a vă arăta munca într-un mod care nu poate fi ratat.
avantaje: Dacă aveți un stil "du-te mare sau du-te acasă", ele într-adevăr nu sunt mult mai mari decât asta.
Dezavantaje: Acestea ar putea fi un pic dificil de integrat într-un site, deoarece acestea sunt concepute pentru a umple ecranul cu munca ta. Imaginile folosite trebuie să fie destul de mari pentru a umple ecrane noi cu rezoluție înaltă.
Uneori vă puteți afla într-o situație în care doriți să afișați o rețea de imagini și să permiteți navigarea rapidă fără ca utilizatorul să încarce o a doua sau a treia pagină.
Unele glisoare au capacitatea de a afișa simultan mai multe imagini pe un diapozitiv sau mai multe diapozitive, așa că verificați lista de caracteristici. În jCarousel Lite prezentat mai sus, "vizibil" este setat la 3, afișând trei diapozitive la un moment dat.
avantaje: Vă permite să defilați mai multe elemente simultan pentru perioadele în care nu este necesară o imagine sau un conținut mare. Mare pentru grupuri de articole sau atunci când aveți camera de pe site.
Dezavantaje: Nu există multe dezavantaje pentru acest stil, în afară de a fi puțin mai complex decât setul standard de fotografie.
Stilul acordeon face ca răsfoirea prin elementele prezentate să fie ceva asemănătoare cu cea a paginilor unei cărți. Acest lucru folosește un comportament clasic "ascunde și dezvălui" comportamentul utilizatorului prin afișarea unui fragment de conținut înainte de a glisa întreaga casetă de acordeon.
avantaje: Un mod foarte unic și distractiv de a afișa elementele dvs. Stilul pas cu pas poate contribui la consolidarea sentimentului de ordine dacă utilizați o paradigmă de conținut "pas 1, pas 2, pas 3".
Dezavantaje: Nu este grozav pentru zeci de diapozitive și poate fi un pic dificil pentru utilizatorii noștri web să opereze în mod accidental glisarea articolelor deschise și închise cu o trecere a mouse-ului. Luați în considerare un clic pentru a deschide stilul tabelului sau setarea, dacă este disponibil.
Simtul pe care il obtii cand folosezi glisorul mare este un simt al simplitatii - pasul 1, pasul 2, pasul 3. O modalitate foarte buna de a arata schimbari progresive, caracteristici sau optiuni de produs.
avantaje: Foarte atenție apucând stilul potrivit. Ca și acordeonul, acest cursor arată un indiciu al ceea ce se află în interiorul fiecărui diapozitiv, ceea ce poate fi excelent pentru vizitatorii care caută informații specifice.
Dezavantaje: Este posibil să fie necesar să limitați numărul de elemente pe care doriți să le includeți, cu excepția cazului în care utilizați un cursor de tab-uri, cum ar fi magazinul de muzică iTunes.
Deși varietatea și cantitatea de glisoare este în continuă creștere, uneori pur și simplu nu puteți găsi o soluție pentru situația dvs. unică.
Dacă intenționați să utilizați mai multe glisiere în proiectele dvs., merită să vă grăbiți să vă grăbiți și să învățați într-adevăr cum funcționează și construiți unul singur. Cel mai bun mod de a învăța este prin exemplu.
Disecați glisierele existente, vedeți cum funcționează și aflați din ele. Nu furați codul altui dezvoltator, ci concentrați-vă asupra a ceea ce fac: animații, schimbarea opacității și revizuirea setărilor pe care le oferă și scrieți-le propriu.
Cu ajutorul unor instrumente precum Firebug, puteți "inspecta" un cursor în timp real, urmărind manipularea z-indexului, opacității sau poziționării pentru a muta conținutul dintr-un diapozitiv în altul.
Veți câștiga o înțelegere mai bună a ceea ce se întâmplă sub capota, veți putea efectua personalizări și veți găsi probleme mai rapide pe drum prin săparea în cât mai multe glisante cât puteți pentru a afla cum funcționează.
Singurul lucru mai abundent decât numărul de glisiere jQuery este numărul de site-uri care le prezintă. Mai degrabă decât să încercați să le enumerați pe toate (noi le ieșim în fiecare săptămână!), Să trecem prin cum să găsim una potrivită pentru dvs.:
O căutare rapidă pe Google va dezvălui că glisierele pot fi găsite într-o varietate de locuri:
Adesea intitulat "25 jQuery Useful Slider Slider Scripts" - acestea sunt posturi create pentru a colecta și revizui diversele diapozitive disponibile la momentul respectiv. Citiți comentariile, precum și articolul pentru a vedea opiniile celorlalți despre colecție.
Site-urile care oferă tutoriale pe glisierele de construcție vor adesea include codul sursă final al proiectului pentru a obține un ghid pas cu pas despre cum este construit și despre rezultatul final de lucru. Cu excepția cazului în care este specificat, proiectul sursă este doar în scopuri educaționale, întrebați înainte de a fi utilizat în orice proiect.
CodeCanyon oferă o întreagă categorie pentru glisiere premium. https://codecanyon.net/category/javascript/sliders
Uneori veți întâlni un site cu un cursor și doriți să vedeți pluginul pe care l-ar fi folosit. Deoarece JavaScript este un script pe partea clientului, faceți o sursă de vizualizare a paginii și căutați care fișiere JavaScript sunt importate, informațiile despre plugin-ul trebuie să fie incluse în partea de sus a script-ului sursă al plugin-ului, cu o adresă URL pentru mai multe informații despre pluginul pentru descărcare și documentația.
Fiți politicos de efortul pe care ceilalți l-au făcut, citiți și respectați acordurile de licență incluse și acordați credit în cazul în care creditul este datorat.
Alegerea unui cursor depinde în mare măsură de funcționalitatea și opțiunile de care aveți nevoie și de stilul general pe care îl conduceți. Decideți la tipul de conținut pe care doriți să îl afișați, cum doriți ca utilizatorii să navigheze prin acesta și să vedeți care dintre cele mai potrivite culise corespund cerințelor dvs..
După ce vă restrângeți opțiunile, comparați dimensiunea scriptului global și verificați dacă este compatibil cu toate browserele.
Unele glisoare sunt oferite într-o versiune "lite", cum ar fi jQuery Cycle Lite, dacă doriți să păstrați dimensiunea totală a fișierului în proiectul dvs. De multe ori, versiunea ușoară nu mai are efectele suplimentare de tranziție, lipindu-se cu cele mai populare opțiuni disponibile.
Dacă nu sunteți un master jQuery, alegeți un cursor cu demonstrații live live pe care le puteți descărca și documentație pentru a vă ajuta să vă faceți personalizările.
Unul dintre lucrurile minunate în ceea ce privește utilizarea unui cursor prestabilit este că majoritatea dintre ele sunt incredibil de ușor de reproiectat în funcție de nevoile dvs. Acest proces (de obicei, numit doar "jupuire") nu este la fel de tare cum ar părea. De obicei, este nevoie doar de editare a unui fișier CSS simplu - cel mai complex jupuire va fi obișnuit să schimbați grafica pe care ați creat-o graficele implicite (cum ar fi fundalul și butoanele).
În plus față de glisoarele de jupuire, este de remarcat, de asemenea, că, cu cele mai multe glisante, este ușor să modificați mărimea pentru a se potrivi site-ului pe care îl proiectați.
Plasarea unui cursor într-un design existent nu este un proces cu o singură etapă, dar cele mai multe scripturi ale slider-ului au o pagină de probă de bază pentru a începe, a importa jQuery, CSS, un exemplu de conținut și a inițializa plugin-ul cu setările implicite.
Să importăm ciclul jQuery într-un site de probă rapid creat în scopul acestui tutorial.
Descărcați site-urile înainte și după site-uri de urmat.
Site-ul demo este format din HTML, CSS și o imagine care va fi punctul de plecare pentru integrarea cursorului.
Vom integra pluginul pentru ciclul jQuery pentru această demonstrație.
Importați biblioteca jQuery și pluginul Cycle în
al site-ului dvs. prin adăugarea acestui cod:Primul script ar trebui să fie cea mai recentă versiune a jQuery. Puteți să-l luați de pe jquery.com sau să îl încărcați din Bibliotecile Google așa cum am făcut mai sus.
Al doilea script este sursa pluginului pe care am plasat-o in directorul / js /.
Schimbați imaginea statică curentă sample_water.jpg utilizată în site-ul demo cu o listă neordonată pentru diapozitive:
Vom folosi doar trei imagini pentru a începe, notați atributul, vom folosi acest lucru mai târziu pentru a spune pluginului nostru, acesta este containerul diapozitivelor noastre. Din moment ce diapozitivele sunt în esență doar o listă de conținut, o etichetă UL este o alegere bună.
Sub lista neordonată de promoții pe care le-am adăugat mai sus, vom adăuga navigația pentru a controla diapozitivele. Pluginul va crea dinamic link-urile de navigare individuale în timpul rulării, pe măsură ce adăugați și eliminați diapozitivele din listă.
Următorul Slide
Clasa următorului buton de diapozitive corespunde parametrului "următor" pe care îl vom folosi pentru a avansa manual diapozitivele.
Indexul promoțional este generat automat dacă parametrul "pager" este setat în opțiuni. Introducându-l manual, putem controla unde merge pe pagină în cazul în care doriți să o faceți altundeva decât în cazul în care pluginul o plasează.
Să adăugăm CSS pentru a modela lista glisoarelor. Unele glisoare precum Nivo Slider au o foaie de stil personalizată pe care o puteți descărca și începe, dar pentru această demonstrație, să adăugăm CSS personalizat direct în capătul fișierului principal screen.css al site-ului.
/ * Eliminați formatarea listei de la Promo UL / LI * / #promo, #promo li margine: 0; padding: 0; list-style-type: none; / * Stiluri pentru containerul de navigare promoțional opțional * / #promonav padding: 4px; fundal: #eee; frontieră: 1px solid # e0e0e0; margin-top: 1px; / * Păstrați următorul buton la marginea dreaptă * / #promonav .next float: right; / * Stiluri de legătură în navigarea promoțională * / #promonav a padding: 0 3px; frontieră: 1px solid #eee; text-decoration: none; schiță: 0; Culoare: # 777; / * Stil aplicat pe mouseover link-uri de navigare promo * / #promonav a: hover culoare: # 000; / * Indicele devine automat o clasă activeSlide, folosiți această pentru a indica diapozitivul curent * / #promoindex a.activeSlide font-weight: bold; fundal: #fff; border-color: #ccc;
În acest moment, avem jQuery și plugin-ul importat, dar nimic nu spune plugin-ului care element al paginii este glisorul nostru sau ce opțiuni să includă - trebuie să fie inițializat.
Creați un fișier numit setup.js și plasați-l în directorul / js /.
Importați-l sub scripturile jQuery și Cycle pe care le-ați importat în
zona site-ului mai devreme în tutorial.Este important să importați jQuery, jQuery Cycle și apoi setup.js în acea ordine exactă sau pluginul să nu funcționeze.
În interiorul setup.js adăugați următorul cod:
(fx: 'scrollHorz', timeout: 4000, viteza: 800, urmatoarea: '#promonav .next', pager: '#promoindex ', înălțime: 200, pauză: 1););
Îmi permite să explic ceea ce se întâmplă în codul de mai sus.
Începem să verificăm dacă documentul este gata cu document.ready, în caz contrar pluginul poate încerca să modifice elementele de pe pagină care nu sunt disponibile sau pregătite.
Următoarea linie afirmă plugin-ului Cycle ce element folosim ca un container al elementelor pe care dorim să le parcurgem. În cazul nostru, containerul are un ID de promo, astfel încât să introducem #promo.
Elementele enumerate de la fx la pauză sunt opțiunile pe care le transmitem în plugin. Dacă nu includeți nimic și pur și simplu folosiți: $ ('# promo'). Ciclu (); plugin-ul ar folosi setările implicite. Opțiunile sunt listate într-o listă separată prin virgulă. Numărul și tipul opțiunilor variază în funcție de plugin, dar ciclul jQuery poate fi găsit la http://jquery.malsup.com/cycle/options.html
Opțiunile următoare și pager se referă la navigația pe care am construit-o în pasul 5 de mai sus și pot fi eliminate dacă nu doriți să includeți navigarea pe cursor.
Descărcați site-urile înainte și după site-uri de urmat.
Glisoarele nu trebuie să fie glisoare foto mari care se întind pe o pagină a site-ului dvs. Utilizați-le pentru a afișa secțiuni de conținut rotativ, cum ar fi marturii, cele mai recente tweet-uri sau articole de blog populare în zonele site-ului care ar putea beneficia de camera extra.
Vă mulțumim pentru lectură!
Accentsconagua