Cykel js fx alternativ

Komma igång Alla demo på den här sidan, och nästan alla demo på den här sidan, kräver nollkod. Bildspelet drivs helt av markup. Allt som behövs är att inkludera jQuery och Cycle2-pluginet med script-taggar så här: Standard Slideshow Det absolut enklaste sättet att komma igång med Cycle2 är att använda markering så här: cykel-bildspel är ett speciellt klassnamn som berättar Cycle2 att auto-initiera bildspelet när sidan är laddad. Resultatet ses nedan: Inställning Alternativ Alternativ ställs in med data-cykel-attribut. Exemplet nedan visar standardfx. paus-on-hover. och hastighetsalternativ överrätts. Manuell bildspel Följande exempel visar hur man får ett manuellt bildspel genom att ställa in timeout-alternativet till noll. Och det visar också hur man binder tidigare och nästa kontroller. För mer information om föregående kontroller, se PrevNext demo. lsaquolsaquo hem jQuery Cycle Plugin Kolla in Cycle2. det senaste i cykellinjen i bildspel. JQuery Cycle Plugin är ett plugin för bildspel som stöder många olika typer av övergångseffekter. Den stöder paus-på-hover, auto-stop, auto-fit, innanpå callbacks, klicka triggers och mycket mer. Den stöder också, men behöver inte, Easing Plugin. Hur det fungerar Pluggen ger en metod som kallas cykel som åberopas på ett behållarelement. Varje barnelement i behållaren blir en bild. Alternativ styr hur och när bilderna övergår. scrollRight (klicka) Bilder används i dessa demos eftersom de ser coola ut, men bildspel är inte begränsade till bilder. Du kan använda vilket element du vill ha. Bläddra i effekter Använd sidan Effects Browser för att förhandsgranska tillgängliga effekter. Se fler demos och exempel Cycle Plugin erbjuder många alternativ för att anpassa ditt bildspel. Standardalternativsvärdena kan överskridas genom att överföra ett alternativobjekt till cykelmetoden, genom att använda metadata på behållarelementet eller genom att omdefiniera värdena i din egen kod. Mer information om alternativ finns på sidan Alternativreferens. Erkännande Särskilt tack till Torsten Baldes. Matt Oakes och Ben Sterling för de många idéer som fick mig att börja skriva Cycle 2007. Denna demo förklarar hur lätt det är att använda jQuery Cycle-alternativ samt några av de bästa av Maximage 2.0. Du kan se hur återuppringningsfunktioner används, såväl som hastighet, fx, timeout, personsökning och verkligen något annat jQuery Cycle-alternativ. Denna demo använder också Maximage 2.0s anpassad hjälparfunktion som gör det möjligt att maximera varje element i bildspelet som bakgrundsbilder i bilderna. I detta fall maximerar vi en HTML5-video i vårt bildspel samt en Youtube Video. Jag ville ha ett sätt att visa upp hur Maximage2 tillåter dig att maximera bilder inom innehållet också, inte bara webbläsarfönstret. Du passerar bara en väljare till Maximage2s fillElement-alternativet och du är bra att gå. Den använder också en annan fx från jQuery Cycle för att visa hur enkelt det är. BackgroundSize Maximage2 kan antingen vara en sträng (täcka eller innehålla) för att bestämma hur bilden fylls i behållaren. Omslaget fyller varje tillgängligt utrymme med bilden medan innehållet maximerar bilden i utrymmet men överskrider inte utrymmet. Dessa kommer att vara de två vanligaste scenariot, men det är mycket möjligt att någon kanske behöver någon annan funktionalitet. Tja Maximage2 låter dig skriva din egen funktion här och det här är ett exempel på hur det görs. Varning: Detta exempel är avsett för expertanvändare. Kom ihåg, med FillElement kan du ofta göra ett kompensationsschema mycket enkelt. Ange bara ditt innehåll där du vill att bilderna ska visas. Eftersom den första regeln i Maximage 2.0 är att försöka hålla händerna av och ut ur vägen, har det inbyggda stödet för förskjutningar tappats med version 2.0. Detta betyder inte att de är möjliga. Med ett litet armbågsfett kan de fortfarande uppnås (och är bättre). Vad jag gör med nedanstående kod skapar gardiner förskjutningar som lever framför bildspelet. Jag ringer dessa gardiner. Jag har gjort detta med HTML och CSS nedan för 100px förskjutningar på skärmens övre, högra, nedre och vänstra kanter. När vi har fått upp gardinerna, ändras bildspelet fortfarande till hela fönstret och vi vill ha det maximalt inom det synliga området. vår fönsterstorlek minus våra förskjutningar. Av den anledningen måste du anpassa funktionen som ändrar fönstret. Vi kan göra det med alternativet backgroundSize som skickas till Maximage. Ställ in din verticalOffset och horizontalOffset i backgroundSize (JS exempel nedan) för att stora dina bildspel i det visade området. För att få bilder som ingår i förskjutningarna, byt du bara på höjden baserat på breddreglerna i bakgrundenSize-funktionen så här: Maximage2 kan användas som ett verktyg för att göra nästan allting ett fullskärmsbakgrundselement väldigt enkelt. I det här exemplet visas hur det kan användas för att skapa en HTML5-video i bakgrunden. OBS! HTML5-videouppbackar för IE7 amp IE8 fyller för närvarande inte skärmen i ett bildspel. Jag jobbar med det här just nu, men om det här är viktigt för dig, använd en annan bildspel för tillfället och kolla tillbaka för uppdateringar eftersom det här visat sig vara mer komplext än vad som förväntades.