Cycle Js Fx Opsjoner

Komme i gang Alle demoer på denne siden, og nesten hver demo på dette nettstedet, krever nullkode. Lysbildefremvisninger er helt drevet av markup. Alt som trengs er å inkludere jQuery og Cycle2-pluginet ved å bruke skriptetiketter som dette: Standard Slideshow Den absolutt enkleste måten å komme i gang med Cycle2, er å bruke markering som dette: syklus-lysbildefremvisning er et spesielt klassenavn som forteller Cycle2 å auto-initialisere lysbildefremvisningen når siden er lastet inn. Resultatet er sett under: Innstilling av Alternativer Alternativer settes med data-syklus-attributter. Eksempelet nedenfor viser standard fx. pause-on-hover. og hastighetsalternativer blir overskredet. Manuell lysbilde Det følgende eksemplet viser hvordan man får en manuell lysbildefremvisning ved å stille inn tidsavbruddsalternativet til null. Og det viser også hvordan man binder forrige og neste kontroller. For mer informasjon om prevnext kontroller, se PrevNext demo. lsaquolsaquo home jQuery Cycle Plugin Sjekk ut Cycle2. det siste i sylinderlinjen på lysbildefremvisninger. JQuery Cycle Plugin er et plugin for lysbildefremvisning som støtter mange forskjellige typer overgangseffekter. Den støtter pause-on-hover, auto-stopp, automatisk tilpasning, før deretter tilbakeringinger, klikk utløsere og mye mer. Den støtter også, men krever ikke, Easing Plugin. Slik fungerer det Pluggen gir en metode som kalles syklus som påberopes på et beholderelement. Hvert barnelement i beholderen blir et lysbilde. Alternativer kontrollerer hvordan og når lysbildene er overført. scrollRight (klikk) Bilder brukes i disse demoer fordi de ser kult ut, men lysbildefremvisninger er ikke begrenset til bilder. Du kan bruke hvilket som helst element du vil ha. Bla gjennom effekter Bruk siden Effects Browser til å forhåndsvise de tilgjengelige effektene. Se flere demoer og eksempler Cycle Plugin gir mange muligheter for å tilpasse lysbildefremvisningen. Standardalternativene kan overstyres ved å sende et alternativobjekt til syklusmetoden, ved å bruke metadata på beholderelementet, eller ved å omdefinere verdiene i din egen kode. For mer om alternativer, se siden Referansealternativer. God takk til Torsten Baldes. Matt Oakes og Ben Sterling for de mange ideene som fikk meg til å begynne med å skrive Cycle i 2007.Denne demoen forklarer hvor enkelt det er å bruke jQuery Cycle-alternativer, samt noen av de beste av Maximage 2.0. Du kan se hvordan tilbakeringingsfunksjoner brukes, så vel som hastighet, fx, timeout, personsøking og virkelig noe annet jQuery Cycle-alternativ. Denne demoen bruker også Maximage 2.0s tilpasset hjelpefunksjon som gjør det mulig å maksimere hvilket som helst element i lysbildeserien som bakgrunnsbilde i lysbildene. I dette tilfellet maksimerer vi en HTML5-video i vår lysbildefremvisning, samt en Youtube-video. Jeg ville ha en måte å vise frem på hvordan Maximage2 lar deg maksimere bilder innenfor inneholdende elementer, ikke bare nettleservinduet. Du sender bare en velger til Maximage2s fillElement-alternativet, og du er god til å gå. Den bruker også en annen fx fra jQuery Cycle for å vise hvor enkelt det er. BackgroundSize Maximage2 kan enten være en streng (dekke eller inneholde) for å bestemme hvordan bildet fyller beholderen. Deksel fyller alle ledige plasser med bildet mens innholdet maksimerer bildet i rommet, men overskrider ikke plassen. Disse kommer til å være de to vanligste scenariene, men det er veldig mulig at noen kanskje trenger litt annen funksjonalitet. Vel Maximage2 lar deg skrive din egen funksjon her, og dette er et eksempel på hvordan det gjøres. Forsiktig: Dette eksemplet er ment for ekspertbrukere. Husk, med FillElement kan du ofte oppnå en offset-ordning veldig enkelt. bare sett ditt inneholdende element der du vil at bildene skal vises. Fordi den første regelen med Maximage 2.0 er å forsøke å holde hendene av og ut av veien, har den innebygde støtten for offsets blitt droppet med versjon 2.0. Dette betyr ikke at de er mulige. Med en liten albuefett kan de fortsatt oppnås (og er bedre). Det jeg gjør med underkoden, er å skape gardiner-kompensasjoner som lever foran lysbildeserien. Jeg ringer disse gardinene. Jeg har gjort dette med HTML og CSS nedenfor for 100px offsets på toppen, høyre, nederst og venstre kant av skjermen. Når vi har gardinene opp, blir lysbildefremvisningen fortsatt tilpasset størrelsen til det fulle vinduet, og vi ønsker å få det til å maksimere innenfor det synlige området. vårt vindu størrelse minus offsets. Av denne grunn må du tilpasse funksjonen som endrer størrelsen på vinduet. Vi kan gjøre det med alternativet backgroundSize som blir sendt til Maximage. Bare sett din verticalOffset og horizontalOffset i backgroundSize (JS eksempel nedenfor) for å formatere bildene dine i det synlige området. For å ha bilder som finnes i offsetene, byttes bare ut basert på høyde, basert på bredderegler i bakgrunnen. Størrelsesfunksjon som denne: Maximage2 kan brukes som et verktøy for å gjøre nesten alt et fullskjerm bakgrunnselement veldig enkelt. Dette eksempelet viser hvordan det kan brukes til å lage en bakgrunns HTML5-video. MERK: HTML5 videobackbacks for IE7 amp IE8 fyller ikke skjermen i en lysbildeserie. Jeg jobber med dette i øyeblikket, men hvis dette er viktig for deg, vennligst bruk en annen lysbildefremvisning for øyeblikket og sjekk for oppdateringer da dette har vist seg å være mer komplekst enn det var forventet.