Share
jQuery-glidere tilbyr en enkel og elegant måte å vise innhold uten å gi opp verdifull eiendomsmegling på websiden din. De har skyrocket i popularitet og kan brukes på flere måter. La oss gå over de populære stilene, velge en glidebryter og integrere en til et demo-nettsted.
En gang på gang hadde et bilde på nettet bare en måte å vise opp: som en flat JPG, GIF eller PNG. Noen ganger for noen år siden begynte bildene å lære nye triks; De grupperte sammen og begynte å dukke opp i jQuery-glidere til applaus av besøkende rundt.
Siden da har de lært en mengde nye triks som gjør dem til toppmateriell for enhver webdesigner. Enten du har brukt dem før eller ikke, vil denne opplæringen gi deg innsikt i de forskjellige smaker av skyvekontrollene, når du skal bruke dem i et design, og vi vil til og med gå deg gjennom en installasjon av en.
Hvis det er en ting som jQuery skyvekontrollene ikke har, er det et konsistent navn. Glidebryteren går gjennom et bredt utvalg av aliaser: galleri, karusell, promos og rotatorer, men de gir alle de samme generelle funksjonene - vise flere innholdsartikler i et delt rom på siden. For formålet med denne artikkelen vil jeg referere til dem alle som en "glidebryter".
jQuery skyveknapper kan brukes til nesten alt, men de fleste brukes til å vise et antall bilder i et lysbildeserieformat på en måte som tidligere ble håndtert av Adobe Flash. Mange tilbyr en rekke overgangseffekter mellom lysbildene og kan styres av tidligere / neste knapper, faneblad eller miniatyrnavigasjon.
Antallet av glidebrytere fortsetter å vokse jevnt, så det har aldri vært enklere å finne en glidebryter som passer dine behov. De kommer i alle former, størrelser og størrelser - et antall av dem er gratis, noe som betyr at når du betaler for en glidebryter, lastes den vanligvis med flotte funksjoner.
Lar gå gjennom noen av de mer populære stilene av glidebrytere nedenfor. Husk, de fleste eksemplene som vises er fra de ustylte demoversjonene, og alle kan tilpasses med noe grunnleggende CSS-kunnskap og lese dokumentasjonen..
En veldig populær stil med skyvekontrollen er fotobryteren. Mange aksepterer et bilde og noen metadata, for eksempel en bildetekst, som ofte trekkes fra alt eller titteltaggen automatisk.
Fordeler: Vanligvis det enkleste å komme i gang med for nybegynnere. Fokuset legges direkte på et stort bilde du velger. Mange har flere overgangseffekter mellom lysbilder fra glidende, fades, zoomer og mer.
ulemper: Hvis du har et bredt utvalg av innhold som du trenger å vise, for eksempel HTML, bilder eller video, kan et blandet innholdsregulator være et bedre valg - de fleste krever at du holder deg til bilder.
Mens det ligner på fotobryteren, kan blendere med blandet innhold tillate deg å bruke mer enn bare bilder. Gjennomgå alle alternativene når du velger en bildevider, noen tillater HTML, men kan ikke være oppført i hovedlisten.
Fordeler: Perfekt for visning av video, HTML og bildeinnhold i samme skyvekontroll hvis nødvendig.
ulemper: Blendere med blandet innhold kan være litt mer avansert for å jobbe med enn vanlig fotobryter.
Galleriestilen brukes ofte i fotograferingsapplikasjoner. Navigasjonen består ofte av miniatyrbilder for å bla gjennom bildene i samlingen din.
Fordeler: Veldig enkelt for brukere å bla gjennom bildene de vil se raskt.
ulemper: Ofte tar det flere eiendommer på siden enn en vanlig glidebryter for å passe til bildet og alle miniatyrbildene.
Tenk på en Rubiks terning, bygget på nettet, uten all hodepine. Det er i utgangspunktet en 3D Block Slider - det er utrolig imponerende fra et visuelt synspunkt, og kan være perfekt for å legge til den ekstra spenningen til et nettsted.
Fordeler: En av de mest visuelt imponerende skyvekontrollene der ute. Hvis besøkende ikke har sett det før, kan deres kjever slå på gulvet.
ulemper: Mens resten av glidebryterne i denne opplæringen er jQuery, er de fleste 3D-glidebrytere bygget i en kombinasjon av Adobe Flash og XML ... som ikke er det mest "standardvennlige" formatet som skal brukes. Disse skyvekontrollene kan kreve litt mer tid til å "forhåndsbelaste"; Fordi de er bygget med Flash, betyr det også at de kan være litt vanskeligere å installere hvis du ikke er kjent med det.
Inspirert av Apples dekselstrømseffekt, er denne skyveffekten en fantastisk måte å vise arbeidet på. Når kombinert med et minimalt stilområde, kan denne glideren føle seg hjemme.
Fordeler: Denne stilen kan være en svært imponerende og veldig interaktiv måte for brukere å bla gjennom et galleri med bilder som viser arbeidet ditt.
ulemper: Mange har en liten rullefelt eller bruker musen rullehjulet eller tastaturet for å se bildene som kan være litt vanskelig med noen utilsiktet rulling.
Sliperen i full størrelse er hva det ser ut - en skyveknapp som tar opp hele siden for å vise arbeidet ditt på en måte som ikke kan gå glipp av.
Fordeler: Hvis du har en "gå stor eller gå hjem" stil, blir de virkelig ikke mye større enn dette.
ulemper: De kan være litt tøffe å integrere i et nettsted siden de er utformet for å fylle skjermen med arbeidet ditt. Bilder som brukes må være ganske store for å fylle nye skjermbilder med høy oppløsning.
Noen ganger kan du finne deg selv i en situasjon der du vil vise et rutenett av bilder og tillate rask surfing uten at brukeren laster inn en andre eller tredje side.
Noen skyveknapper har muligheten til å vise flere bilder per lysbilde eller flere lysbilder samtidig, så sjekk funksjonslisten. I jCarousel Lite som er omtalt ovenfor, er "synlig" satt til 3, og viser tre lysbilder om gangen.
Fordeler: Lar deg bla flere elementer samtidig for tider når et stort bilde eller innhold ikke er nødvendig. Flott for grupper av elementer, eller når du har rommet på stedet.
ulemper: Det er ikke mange ulemper for denne stilen annet enn bare å være litt mer komplisert å sette opp enn vanlig fotobryter.
Trekkspillet stil gjør surfing gjennom kjente elementer litt som å bla gjennom sider av en bok. Dette bruker en klassisk "skjul og avsløre" brukeradferd ved bare å vise en utdrag av innholdet før du skyver hele trekkspillkassen ut.
Fordeler: En veldig unik og morsom måte å vise dine varer på. Den stiplede stilen kan bidra til å styrke en følelsesorden hvis du bruker et "innholds paradigme" trinn 1, trinn 2, trinn 3.
ulemper: Ikke bra for dusinvis av lysbilder, og det kan være litt vanskelig for nye web-brukere å operere ved et uhell å skyve gjenstander åpne og lukke med et pass på musen. Tenk på et klikk for å åpne fanestilen eller innstillingen hvis tilgjengelig.
Følelsen du får når du bruker den store flipperskjermen er en følelse av enkelhet - trinn 1, trinn 2, trinn 3. En fin måte å vise progressive endringer, funksjoner eller produktalternativer på.
Fordeler: Svært oppmerksomhet griper med riktig styling. Som trekkspillet viser denne skyveknappen et hint av hva som er inne i hvert lysbilde, noe som kan være bra for besøkende som søker spesifikk informasjon.
ulemper: Du må kanskje begrense antall elementer du vil inkludere, med mindre du bruker en glidebryter som iTunes Music Store.
Selv om variasjonen og mengden skyveknapper øker jevnt, kan du noen ganger ikke finne en løsning for din unike situasjon.
Hvis du skal bruke mange skyveknapper i prosjektene dine, er det verdt en stund å grave inn og virkelig lære hvordan de jobber og bygge en selv. Den beste måten å lære på er ved eksempel.
Dissect eksisterende skyveknapper, se hvordan de jobber og lære av det. Ikke stjele andre utviklerens kode, men legg i stedet fokus på hva de gjør: animasjoner, endring av deaktighet og gjennomgang av innstillingene de tilbyr og skriv det på din egen måte.
Med verktøy som Firebug kan du "inspisere" en glidebryter i sanntid, se den manipulere z-indeksen, opaciteten eller posisjoneringen for å flytte innhold fra ett lysbilde til det neste.
Du får større forståelse for hva som skjer under hetten, kan utføre tilpassinger og finne problemer raskere nedover veien ved å grave inn i så mange skyvekontrollere som mulig for å lære hvordan de fungerer.
Det eneste mer rikelig enn antall jQuery-glidere er antall nettsteder som viser dem. Snarere enn å prøve å liste dem alle her (nye kommer ut hver uke!), La oss gå gjennom hvordan du finner en som passer for deg:
Et raskt Google-søk vil avdekke skyvekontrollene finnes på en rekke steder:
Ofte med tittelen som "25 nyttige jQuery Content Slider Scripts" - de er opprettet for å samle inn og gjennomgå de forskjellige skyvekontrollene som er tilgjengelige på det tidspunktet. Les kommentarene samt artikkelen for å se andres meninger på samlingen.
Nettsteder som tilbyr opplæringsprogrammer om å bygge skyveknapper, vil ofte inkludere prosjektets endelige kildekode, slik at du får en trinnvis veiledning om hvordan den er bygget og det endelige arbeidsresultatet. Med mindre spesifikk bemerket, er kildeprosjektet bare for utdanningsformål, spør før du bruker i noen prosjekter.
CodeCanyon tilbyr en hel kategori for premium glidere. https://codecanyon.net/category/javascript/sliders
Noen ganger kommer du over et nettsted med en glidebryter, og du vil se hvilket plugin de kanskje har brukt. Siden JavaScript er et klientsideskript, gjør en visningskilde for siden og se hvilke JavaScript-filer som importeres, bør plugininformasjonen være inkludert øverst i pluginets kildeskript med en URL for mer informasjon om plugin for nedlasting og dokumentasjon.
Vær høflig av innsatsen andre har gjort, les og overholde lisensavtalen som inngår og gi kreditt hvor kreditt skyldes.
Å velge en glidebryter er i stor grad avhengig av funksjonaliteten og alternativene du trenger, og den generelle stilen du skal til. Bestem hvilken type innhold du trenger, hvordan du vil at brukerne skal navigere gjennom den og se hvilken skyvekontroll som best passer dine behov.
Når du har begrenset dine valg, sammenligner du den totale skriptstørrelsen og kontrollerer om er kompatibel med alle nettlesere.
Noen skyveknapper tilbys i en "lite" versjon som jQuery Cycle Lite hvis du ønsker å holde den totale filstørrelsen nede i prosjektet. Ofte mangler den lette versjonen bare de ekstra overgangseffekter som stikker med de mest populære alternativene som er tilgjengelige.
Hvis du ikke er en jQuery-mester, velger du en glidebryter med flotte live demoer du kan laste ned og dokumentasjon for å hjelpe deg med å gjøre tilpassingene dine..
En av de store tingene med å bruke en forhåndsbestemt glidebryter er at de fleste av dem er utrolig enkle å redesigne etter dine behov. Denne prosessen (vanligvis bare kalt "skinning") er ikke så vanskelig som det kan virke. Vanligvis krever det bare å redigere en enkel CSS-fil - den mest komplekse skinningen vil vanligvis få, bytte ut grafikk som du har opprettet sin standardgrafik (som bakgrunn og knapper).
I tillegg til glidebrytere, er det også verdt å merke seg at med de fleste skyvekontrollene er det enkelt å endre størrelsen slik at den passer til nettstedet du designer.
Å sette en glidebryter i en eksisterende design er ikke en enkelt-trinns prosess, men de fleste gliderskriptene kommer med en grunnleggende prøveside for å komme i gang, importere jQuery, CSS, prøveinnhold og initialisere pluginet med standardinnstillingene.
La oss importere jQuery Cycle til et raskt prøveområde som er opprettet for formålet med denne opplæringen.
Last ned før og etter nettsteder for å følge med.
Demo-siden består av grunnleggende HTML, CSS og et bilde som vil være utgangspunktet for å integrere skyveknappen.
Vi integrerer jQuery Cycle plugin for denne demoen.
Importer jQuery-biblioteket og Syklus-plugin-modulen i
av nettstedet ditt ved å legge til denne koden:Det første skriptet bør være den nyeste versjonen av jQuery. Du kan hente den av jquery.com eller laste den fra Google Biblioteker som vi har gjort ovenfor.
Det andre skriptet er plugin-kilden som vi plasserte i / js / mappen.
Bytt ut gjeldende statiske sample_water.jpg-bildet som brukes på demoområdet med en uordnet liste for lysbilder:
Vi vil bare bruke tre bilder for å komme i gang, merk av attributtet, vi bruker dette senere for å fortelle pluginet vårt, dette er beholderen til våre lysbilder. Siden lysbilder er egentlig bare en liste over relatert innhold, er en UL-tag et godt valg.
Under den uordnede listen over kampanjer vi la til ovenfor, legger vi til navigasjonen for å kontrollere lysbildene. Pluginet vil opprette de individuelle navigeringslinkene dynamisk ved kjøring som du legger til og fjerner lysbilder fra listen.
Neste Slide
Den neste lysbildeknappens klasse tilsvarer den "neste" parameteren vi vil bruke til å flytte lysbildene manuelt.
Promoindeksen genereres automatisk hvis parameteren "personsøker" er angitt i alternativene. Ved å skrive inn det manuelt, kan vi kontrollere hvor det går på siden hvis du vil ha det et annet sted enn hvor pluggen plasserer det.
La oss legge til CSS for å utforme glidebryterlisten. Noen skyveknapper som Nivo Slider har et tilpasset stilark som du kan laste ned og komme i gang, men for denne demo, la oss legge til vår egendefinerte CSS direkte til slutten av nettstedets hovedskjerm.css-fil.
/ * Fjern listeformatering fra Promo UL / LI * / #promo, #promo li margin: 0; padding: 0; list-style-type: none; / * Stiler for valgfri promo navigasjonsbeholder * / #promonav polstring: 4px; bakgrunn: #eee; grense: 1px solid # e0e0e0; margin-top: 1 px; / * Hold neste knapp i høyre kant * / #promonav .next float: right; / * Link stiler i promo navigasjon * / #promonav en padding: 0 3px; grense: 1px solid #eee; text-decoration: none; omriss: 0; color: # 777; / * Stil brukt på mouseover av promo navigasjonslenker * / #promonav a: hover color: # 000; / * Indeksen får automatisk en aktivSlid klasse, bruk denne til å indikere gjeldende lysbilde * / #promoindex a.activeSlide font-weight: bold; bakgrunn: #fff; border-color: #ccc;
På dette tidspunktet har vi jQuery og plugin importert, men ingenting forteller plugin hvilket element på siden er vår skyveknapp eller hvilke alternativer som skal inkluderes - den må initialiseres.
Opprett en fil som heter setup.js og legg den inn i / js / katalogen.
Importer den i under jQuery og Cycle-skriptene du importerte i
område av området tidligere i opplæringen.Det er viktig at du importerer jQuery, jQuery Cycle og deretter setup.js i den eksakte bestillingen, eller pluginet vil ikke fungere.
Inside setup.js legger til følgende kode:
Accentsconagua
$ (dokument) .ready (funksjon () $ ('# promo'). syklus (fx: 'scrollHorz', timeout: 4000, hastighet: 800, neste: '#promonav .next', personsøker: '#promoindex ', høyde: 200, pause: 1);); Lar meg forklare hva som foregår i koden ovenfor.
Vi starter med å sjekke om dokumentet er klart med dokumentet.Og ellers kan pluginet prøve å endre elementer på siden som ikke er tilgjengelig eller klar.
Neste linje forteller Cycle plugin hvilket element vi bruker som en beholder av elementene vi vil sykle gjennom. I vårt tilfelle har containeren en ID for promo, så vi skriver inn #promo.
Elementene som er oppført fra fx til pause, er alternativer vi sender inn i plugin. Hvis vi ikke inkluderer noen og bare bruker: $ ('# promo'). Cycle (); pluginet vil bruke standardinnstillingene. Alternativer er oppført i en kommaseparert liste. Antallet og typen alternativer varierer per plugin, men for jQuery Cycle kan du finne på http://jquery.malsup.com/cycle/options.html
De neste og personsøkeralternativene refererer til navigasjonen vi bygget i trinn 5 ovenfor, og kan fjernes hvis du ikke vil inkludere navigasjon på skyvekontrollen.
Last ned før og etter nettsteder for å følge med.
Skyvekontrollene behøver ikke å være store bildeskytere som strekker seg over en side på nettstedet ditt. Bruk dem til å vise seksjoner av roterende innhold som anbefalinger, dine siste tweets eller populære bloggartikler på områder av nettstedet som kan ha nytte av det ekstra rommet.
Takk for at du leste!
