Använda Wonderful JFlow Plugin

Det verkar som om besättningen av webbdesign industrin just nu är möjligheten att skapa en "featured section". Även om det en gång kan ha krävt mycket skicklighet, så är det inte längre fallet. I den här skärmbilden visar jag dig hur du enkelt skapar en rullningsbar del med en av Theme Forests populära teman som referens. Låt oss komma in i det!

* Ledsen om den mindre än perfekta ljudkvaliteten. Jag menade att hämta en kondensormikrofon denna vecka, men jag har varit super upptagen. Jag lovar att få det som tagit hand om ASAP. Också, om du är intresserad av att skapa videoupptagningar för oss, maila mig på [email protected].

Du kan se och köpa Justins tema här.

Hämta pluginprogrammet

Som alltid med ett nytt plugin är det första steget att besöka skaparens hemsida och ladda ner plugin. Allt du behöver är en liten Javascript-fil - och förstås en kopia av jQuery-kärnbiblioteket. Medan du är på plats, ta några ögonblick för att gå över koncepten. Du kommer bli förvånad över hur enkelt implementeringen är, relativt sett (eller skriva?).

Genomförande

När du har sparat Javascript-filen till din hårddisk, importera till en ny webbapplikation som så.

* Observera att du borde importera kärnbiblioteket före jFlow. Annars får du några uppenbara fel!

För att använda jFlow-plugin måste du förstå funktionen för vissa ids och klasser.

div # controller: Detta element kommer att fungera som vår "krok" när du ringer till vår jQuery.
.jFlowControl: Dessa spänner kommer att vara barn till #controller div. För så många bilder som du har måste du skapa tillhörande span-taggar med den här klassen. Om jag till exempel hade fem bilder, måste jag ha fem taggar med en klass av .jFlowControl. Du förstår detta mer genom exempel, inom kort.
div # slides: Inom dividerna div måste du näsa ytterligare divs som innehåller ditt önskade innehåll för varje "slide". Mer om detta senare.
.jFlowPrev, .jFlowNext: Dessa två klasser låter dig fortsätta till nästa bild eller vice versa.

Prov HTML-dokument

   Nr 1  Nr 2  Nr 3  
    
  Här är en utmärkad bild. Trevlig!
 Här är en annan snyggt presenterad bild. Trevlig!
 Här är en senast väldigt cool bild. Trevlig!

Låt oss gå över det här lite.

Som med de flesta sidor har vi förpackat hela innehållet i ett "wrap" -element. Detta är enbart av estetiska skäl. Det är inte nödvändigt.
I min controller div (som är kroken för jFlow), har jag lagt till tre spårstaggar med en klass av "jFlowControl". Tänk på dessa spänner som flikar. Om du klickar på "Nej 3", går det snabbt till den tredje associerade "glida". Kom ihåg att antalet span-taggar du har måste vara lika med antalet divs inom din "slide" div. Observera att båda har tre.
Förflyttning, vi kommer nu till en div med ett id för "prevNext". Det här är inte ett nyckel-id, jag kunde ha namngivit Rick om jag ville ha det. Det är helt enkelt en wrapper div så att jag kan styra var mina "Nästa" och "Föregående" knappar går på sidan. Klassens namn på bilderna är dock viktigt: "jFlowPrev", "jFlowNext".
Sist kommer vi till "slides" div. Inom denna div lägger vi barns div. Var och en av dessa barn kommer att tjäna som en "flik". Återigen, notera att om jag ville lägga till en fjärde bild skulle jag också behöva ytterligare en "jFlowControl" span-tagg inom kontrollenheten div.

jQuery

Koden som vi måste skriva är ganska enkel. Först, granska slutskriptet, och sedan går jag över varje rad.

 $ (funktion () $ ("# controller"). jFlow (slides: "#slides", bredd: "980px", höjd: "313px", duration: 600););

Det är allt!. Först väntar vi på när dokumentet är färdigt att korsas. Då tar vi vår controller div och kallar "jFlow" -metoden. Det finns många parametrar tillgängliga för oss, men vi använder bara några.

slides: Det frågar, "Vad heter div-elementet som innehåller varje bild - eller flik? Vi associerar den med den lämpliga" diabilder "-divisionen som jag skapade tidigare. Men du kan ändra den om du gillar.
Bredd höjd: Dessa är nödvändiga. I det här exemplet använder jag bara bilder. Som ett resultat har jag satt bredd- och höjdvärdena lika med bilderna.
Varaktighet: I millisekunder, hur lång tid vill du ha övergången från bild till bild? Jag har satt 600 - vilket är ungefär en halv sekund.

Du är klar

Den enda andra sak som du vill implementera är en del CSS-styling. JFlow kommer dock att fungera perfekt utan det. Det skulle självklart bara vara av estetiska skäl. Om du vill ha mer information, går jag över styling lite mer i skärmen.

Layouten som ser ovan är avsiktligt enkel. Jag lämnar det för dig att föreställa dig alla olika användningsområden!

För några veckor sedan skapade Chris Coyier en handledning om en liknande plugin - "codaSlider". Jag har personligen använt plugin i ett par projekt, men jag har funnit att jFlow är mycket enklare och lättare att använda. I båda fallen är båda kraftfulla plugins. Använd dem klokt.

Prenumerera på Weekly Screencasts

Du kan lägga till vårt RSS-flöde till dina ITUNES-podcaster genom att göra följande:

När ITUNES har laddat, klickade du på "Avancerad flik"
Välj "Prenumerera på Podcast"
Ange "http://feeds.feedburner.com/NETTUTSVideos"

Det borde göra det! Screencasten kommer också att sökas på ITUNES under de närmaste tjugo fyra timmarna.

Ytterligare resurser

jFlow-plugin

Det här är hemmaplanen för jFlow-plugin. Det kommer att komma igång med Javascript-filen tillsammans med några användbara exempel.

Besök webbplats
ThemeForest

Om du vill lära dig mer, eller bara göra några extra pengar, se till att du besöker ThemeForest.net.

Besök webbplats
Dynamisk kul med enkel paj och jQuery - Coda slider tutorial

Kolla in ett annat jQuery-plugin som utför en liknande funktion. I den här handledningen kommer Chris Coyier att visa dig hur du kan implementera coda-reglaget för att skapa en vacker bloggroll.

Läs artikeln

Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.

Koda