Share
jQuery-reglaget ger ett enkelt och elegant sätt att visa innehåll utan att ge värdefull fastighet på din webbsida. De har skyrocket i popularitet och kan användas på olika sätt. Låt oss gå över de populära stilar, välja en skjutreglage och integrera en i en demo webbplats.
En gång på gång hade en bild på webben bara ett sätt att dyka upp: som en platt JPG, GIF eller PNG. Någon gång för några år sedan började bilderna lära sig nya tricks; De grupperade ihop och började dyka upp i jQuery-reglagen till applåder av besökare runt omkring.
Sedan dess har de lärt sig en mängd nya tricks som gör dem till ett utmärkt material för alla webbdesigners. Oavsett om du har använt dem före eller inte kommer den här handledningen att ge dig inblick i olika smaker av reglagen, när du ska använda dem i en design och vi kommer även att gå igenom en installation av en.
Om det finns en sak som jQuery-reglaget inte har, är det ett konsekvent namn. Glidreglaget går genom ett brett utbud av aliaser: galleri, karusell, promos och rotatorer men de har alla samma allmänna funktion - visa flera innehållsobjekt i ett delat utrymme på sidan. I syftet med denna artikel kommer jag att hänvisa till dem alla som en "slider".
jQuery-reglaget kan användas för nästan vad som helst, men de flesta används för att visa ett antal bilder i ett bildspelformat på ett sätt som tidigare hanterats av Adobe Flash. Många erbjuder ett antal övergångseffekter mellan diabilder och kan styras av tidigare / nästa knappar, flikar eller miniatyrnavigering.
Antalet och olika slidreglage fortsätter att växa stadigt, så att hitta en reglage som passar dina behov har aldrig varit enklare. De finns i alla former, storlekar och storlekar - ett antal är gratis, vilket innebär att när du betalar för en skjutreglage, laddas den vanligtvis med bra funktioner.
Låt oss gå igenom några av de mer populära stilarna av reglagen nedan. Tänk på att de flesta exemplen som visas är från de ostylade demoversionerna och alla kan anpassas med viss grundläggande CSS-kunskap och läsa dokumentationen.
En mycket populär stil med skjutreglaget är fotoglaget. Många accepterar en bild och vissa metadata, t.ex. en bildtexta, som ofta dras automatiskt från alt eller titellaggen.
fördelar: Vanligtvis är det lättast att komma igång med för nybörjare. Fokus ligger direkt på en stor bild du väljer. Många har flera övergångseffekter mellan diabilder från glidning, bleknar, zoomar och mer.
nackdelar: Om du har ett brett utbud av innehåll som du behöver visa som HTML, bilder eller video, kan en blandad innehållsreglage vara ett bättre val - de flesta kräver att du håller dig vid bilderna.
Medan bildskäraren liknar bildskärmarna kan du använda mer än bara bilder. Granska alla alternativ när du väljer en bildreglage, vissa tillåter HTML men får inte listas i listan över primära funktioner.
fördelar: Perfekt för att visa video, HTML och bildinnehåll inom samma reglage om det behövs.
nackdelar: Blandade innehållsreglage kan vara lite mer avancerade att arbeta med än din vanliga fotolänk.
Galleristilen används ofta i fotograferingsapplikationer. Navigationen består ofta av miniatyrbilder för att bläddra igenom bilderna i din samling.
fördelar: Mycket enkelt för användarna att bläddra igenom bilderna som de vill se snabbt.
nackdelar: Ofta tar det fler fastigheter på sidan än en standardreglage för att passa bilden och alla miniatyrbilder.
Tänk på en Rubiks kub, byggd på webben, utan all huvudvärk. Det är i grunden vad en 3D Block Slider är - det är otroligt imponerande från en synvinkel och kan vara perfekt för att lägga till den extra lite spänningen till en webbplats.
fördelar: En av de mest visuellt fantastiska skjutreglagen där ute. Om besökare inte har sett det tidigare, kan deras käkar slå golvet.
nackdelar: Medan resten av reglagen i den här handledningen är jQuery, är de flesta 3D Block Sliders byggda i en kombination av Adobe Flash och XML ... vilket inte är det mest "standardvänliga" formatet som ska användas. Dessa reglage kan kräva lite mer tid att "förspela"; Eftersom de är byggda med Flash, betyder det också att de kan vara lite knepigare att installera om du inte är bekant med den.
Inspirerad av Apples täckflödeseffekt är denna glidande effekt ett fantastiskt sätt att visa ditt arbete. När den är kopplad till en minimal stil, kan den här reglaget känna sig riktigt hemma.
fördelar: Denna stil kan vara ett mycket imponerande och väldigt interaktivt sätt för användarna att bläddra i ett galleri med bilder som visar ditt arbete.
nackdelar: Många har en liten rullningsfält eller använder musrullehjulet eller tangentbordet för att se bilderna som kan vara lite besvärliga med någon oavsiktlig bläddring.
Skytten i full storlek är vad det verkar - en reglage som tar upp hela sidan för att visa upp ditt arbete på ett sätt som inte går att missa.
fördelar: Om du har en "gå stor eller gå hem" stil, blir de verkligen inte mycket större än detta.
nackdelar: De kan vara lite svåra att integrera i en webbplats eftersom de är utformade för att fylla skärmen med ditt arbete. Bilder som används måste vara ganska stora för att fylla nya högupplösta skärmar.
Ibland kan du befinner dig i en situation där du vill visa ett bildruta och tillåta snabb bläddring utan att användaren laddar en andra eller tredje sida.
Vissa skjutreglage har möjlighet att visa flera bilder per bildruta eller flera bilder på en gång, så kontrollera funktionslistan. I ovanstående jCarousel Lite är "synligt" inställt på 3 och visar tre bilder i taget.
fördelar: Låter dig rulla flera objekt på en gång för tillfället när en stor bild eller innehåll inte behövs. Perfekt för grupper av objekt eller när du har rummet på platsen.
nackdelar: Det finns inte många nackdelar med den här stilen än att bara vara lite mer komplicerad att sätta upp än standardfotograferaren.
Harmoniseringsstilen gör att du bläddrar igenom utvalda objekt lite som att bläddra igenom sidor i en bok. Detta använder en klassisk "dölja och avslöja" användarbeteende genom att bara visa ett utdrag av innehållet innan du glider hela dragspelet ut.
fördelar: Ett mycket unikt och roligt sätt att visa dina föremål. Den stegade stilen kan hjälpa till att förstärka en orderordning om du använder ett innehålls paradigm "steg 1, steg 2, steg 3".
nackdelar: Inte bra för dussintals bilder och kan vara lite svårt för nya webbanvändare att driva oavsiktligt glidande objekt öppna och stänga med ett pass på musen. Tänk på ett klick för att öppna flikstil eller inställning om det är tillgängligt.
Känslan du får när du använder den stora flikarna är en känsla av enkelhet - steg 1, steg 2, steg 3. Ett bra sätt att visa progressiva ändringar, funktioner eller produktalternativ.
fördelar: Mycket uppmärksamhet griper med korrekt styling. Precis som dragspelet visar denna reglage ett tips på vad som finns inuti varje bild, vilket kan vara bra för besökare som söker specifik information.
nackdelar: Det kan hända att du måste begränsa antalet objekt som du vill inkludera om du inte använder en flikskytt som iTunes Music Store.
Trots att sorten och antalet glidreglage ständigt ökar, kan du ibland inte hitta en lösning för din unika situation.
Om du ska använda många skjutreglage i dina projekt är det värt att du ska gräva dig och verkligen lära dig hur de fungerar och bygga en själv. Det bästa sättet att lära sig är genom exempel.
Dissect befintliga reglage, se hur de fungerar och lära av det. Stela inte annan utvecklarens kod, utan istället fokusera på vad de gör: animeringar, ändra opacitet och granska inställningarna som de erbjuder och skriv det på egen väg.
Med verktyg som Firebug kan du "inspektera" en reglage i realtid, titta på den manipulera z-indexet, opaciteten eller positioneringen för att flytta innehåll från en bild till nästa.
Du kommer att få en större förståelse av vad som händer under huven, kunna utföra anpassningar och hitta problem snabbare på vägen genom att gräva in i så många reglage som möjligt för att lära sig hur de fungerar.
Det enda som är rikligare än antalet jQuery-reglage är antalet webbplatser som visar dem. Snarare än att försöka lista alla dem här (nya kommer ut varje vecka!), Låt oss gå igenom hur man hittar en som passar dig:
En snabb Google-sökning kommer att avslöja att reglage kan hittas på olika ställen:
Ofta med titeln "25 Användbara jQuery Content Slider Scripts" - de är inlägg som skapats för att samla in och granska de olika reglagen som finns tillgängliga vid den tiden. Läs kommentarerna samt artikeln för att se andras åsikter på samlingen.
Webbplatser som erbjuder handledning om att bygga reglage kan ofta innehålla projektets slutliga källkod så att du får en stegvis guide om hur det är byggt och det slutliga arbetsresultatet. Om inget annat anges är källprojektet bara för utbildningsändamål, fråga innan du använder i några projekt.
CodeCanyon erbjuder en hel kategori för premiumreglage. https://codecanyon.net/category/javascript/sliders
Ibland kommer du över en webbplats med en skjutreglage och du vill se vilket plugin de kan ha använt. Eftersom JavaScript är ett klientsideskript, gör en källa för sidan och se vilka JavaScript-filer som importeras, ska plugininformationen inkluderas längst upp i plugins källskript med en URL för mer information om plugin för nedladdning och dokumentation.
Var artig av de ansträngningar som andra har gjort, läs och följ de licensavtal som ingår och ge kredit där krediten är förfallen.
Att välja en reglage är i stor utsträckning beroende av funktionaliteten och alternativen du behöver och den övergripande stilen du ska gå för. Bestäm av vilken typ av innehåll du behöver visas, hur du vill att användarna ska navigera igenom den och se vilken reglage som bäst passar dina krav.
När du har minskat dina val, jämför du den totala skriptstorleken och kontrollera om det är kompatibelt med alla webbläsare.
Vissa skjutreglage erbjuds i en "lite" version som jQuery Cycle Lite om du vill hålla den totala filstorleken nere i ditt projekt. Ofta saknar ljusversionen bara de extra övergångseffekterna som klarar de mest populära alternativen som finns tillgängliga.
Om du inte är en jQuery-mästare, välj en reglage med bra live demos som du kan ladda ner och dokumentation för att hjälpa dig genom att göra dina anpassningar.
En av de fantastiska sakerna med att använda en förarbetad glider är att de flesta av dem är otroligt lätta att redesigna efter dina behov. Denna process (vanligtvis kallad "skinning") är inte så svår som det kan tyckas. Vanligtvis krävs det bara att redigera en enkel CSS-fil - den mest komplexa fläcken kommer vanligtvis att få byta ut grafik som du har skapat sin standardgrafik (som bakgrunder och knappar).
Förutom glidreglage är det också värt att notera att det med de flesta skjutreglage är lätt att ändra storlek så att den passar den webbplats som du utformar.
Att placera en skjutreglage i en befintlig design är inte en enkelstegsprocess, men de flesta schaktskript kommer med en grundläggande provsida för att komma igång, importera jQuery, CSS, provinnehåll och initiering av plugin med standardinställningarna.
Låt oss importera jQuery Cycle till en snabb provplats skapad för syftet med denna handledning.
Ladda ner före och efter webbplatser att följa med.
Demo-webbplatsen består av grundläggande HTML, CSS och en bild som kommer att vara utgångspunkten för att integrera reglaget.
Vi kommer att integrera jQuery Cycle plugin för denna demo.
Importera jQuery-biblioteket och Cykelprogrammet i
av din webbplats genom att lägga till den här koden:Det första skriptet ska vara den senaste versionen av jQuery. Du kan ta bort den från jquery.com eller ladda den från Google Biblioteken som vi har gjort ovan.
Det andra skriptet är pluginkällan som vi placerade i / js / mappen.
Byt ut den aktuella statiska sample_water.jpg bilden som används på demo-webbplatsen med en orörd lista för bilder:
Vi ska bara använda tre bilder för att komma igång, notera attributet, vi använder det senare för att berätta för plugin här är behållaren i våra bilder. Eftersom bilderna i grunden bara är en lista med relaterat innehåll är en UL-tag ett bra val.
Under den oordnade listan över promos som vi lagt till ovan lägger vi till navigationen för att styra bilderna. Pluggen skapar de enskilda navigeringslänkarna dynamiskt vid körning när du lägger till och tar bort bilder från listan.
Nästa Slide
Nästa bildskärmsklass motsvarar den "nästa" parametern som vi kommer att använda för att fördjupa skivorna manuellt.
Promo-indexet skapas automatiskt om parametern "pager" är inställd i alternativen. Genom att skriva in det manuellt kan vi styra var det går på sidan om du ville ha det någonstans annat än där plugin placerar det.
Låt oss lägga till CSS för att utforma glidlistan. Några reglage som Nivo Slider har ett anpassat stilark som du kan ladda ner och komma igång, men för den här demo, låt oss lägga till vår anpassade CSS direkt i slutet av webbplatsens huvudsakliga screen.css-fil.
/ * Ta bort listformatering från Promo UL / LI * / #promo, #promo li margin: 0; padding: 0; list-style-type: none; / * Styles för den valfria promo navigationsbehållaren * / #promonav padding: 4px; bakgrund: #eee; gräns: 1px fast # e0e0e0; margin-top: 1px; / * Håll nästa knapp i den högra kanten * / #promonav .next float: right; / * Länkformat i promo navigering * / #promonav en padding: 0 3px; gränsen: 1px solid #eee; text-decoration: none; disposition: 0; color: # 777; / * Stil applicerad på mouseover av promo navigationslänkar * / #promonav a: svävar färg: # 000; / * Indexet får automatiskt en aktivSlidklass, använd den här för att ange den aktuella bilden * / #promoindex a.activeSlide font-weight: bold; bakgrund: #fff; border-färg: #ccc;
Vid denna tidpunkt har vi jQuery och plugin importerat, men ingenting talar om plugin vilket element på sidan är vår reglage eller vilka alternativ som ska inkluderas - det måste initialiseras.
Skapa en fil som heter setup.js och placera den i / js / katalogen.
Importera det under de jQuery- och cykelskript som du importerade i
område av webbplatsen tidigare i handledningen.Det är viktigt att du importerar jQuery, jQuery Cycle och sedan setup.js i den exakta ordern eller plugin inte fungerar.
Inne i setup.js lägg till följande kod:
Accentsconagua
$ (dokument) .ready (funktion () $ ('# promo') .cykel (fx: 'scrollHorz', timeout: 4000, hastighet: 800, nästa: '#promonav .next', personsökare: '#promoindex ', höjd: 200, paus: 1);); Låt mig förklara vad som händer i koden ovan.
Vi börjar med att kolla om dokumentet är klart med dokumentet.Är annars kan pluginet försöka ändra element på sidan som inte är tillgänglig eller klar.
Nästa rad säger Cykelplugin vilket element vi använder som behållare av de objekt vi vill cykla igenom. I vårt fall har behållaren ett ID för promo så vi skriver in #promo.
Objekten som listas från fx till paus är alternativ vi passerar in i plugin. Om vi inte inkluderar någon och helt enkelt använder: $ ('# promo'). Cycle (); plugin skulle använda standardinställningarna. Alternativ listas i en kommaseparerad lista. Antalet och typen av alternativ varierar per plugin men för jQuery Cycle finns på http://jquery.malsup.com/cycle/options.html
Nästa och personsökarens alternativ hänvisar till navigeringen som vi byggde i steg 5 ovan och kan tas bort om du inte vill inkludera navigering på skjutreglaget.
Ladda ner före och efter webbplatser att följa med.
Sliderna behöver inte vara stora fotoredigerare som sträcker sig över en sida på din webbplats. Använd dem för att visa sektioner av roterande innehåll, såsom testimonials, dina senaste tweets eller populära bloggartiklar i områden på webbplatsen som kan dra nytta av det extra rummet.
Tack för att du läser!
