jQuery jCarousel Script

• Kan 11, 2024

jQuery har gjort å legge bilder til nettsteder til en enkel oppgave. Det er mange jQuery-skript utgitt under MIT- og / eller GPL-lisensene. De fleste av disse er plug-and-play (plug-in) -skript som ikke krever programmeringskunnskap for å bruke på nettstedet ditt eller installere på kundens nettsted. Det kan være lurt å vurdere å legge til jQuery-skript til designtjenestene dine.

Et slikt jQuery-manus av Jan Sorgalla er jCarousel. Denne pluginen kan ha mange applikasjoner for både grafikk og tekst. Hovedfunksjonen til skriptet er å bla innhold horisontalt eller vertikalt. Innholdet kan være statisk eller lastes dynamisk via Ajax, JavaScript, PHP eller Flickr. Dette andre alternativet krever selvfølgelig kjent med disse språkene. jCarousel fungerer også med Thickbox 3 slik at et stort bilde åpnes i Thickbox når du klikker på miniatyrbildet i karusellen.

Det meste av koden for skriptet henvises til i hoveddelen på websiden. Du trenger jQuery-biblioteket og jCarousel-kildekoden og stilarkfiler. Det som er fint med dette plug-in er at det kan "flås" av CSS for å ha mange utseende. Innholdet som skal rulles av skriptet, plasseres i hoveddelen av websiden i en grunnleggende UL-liste.

Du har flere alternativer for å konfigurere skriptet, inkludert å legge til tilpasset animasjon og lette. Den kan fungere med autoscrolling eller navigasjonsknapper. En annen fin funksjon er at bredden på karusellen endres automatisk til å passe til nettleservinduet. Det kan konfigureres til å vise mer eller mindre bilder avhengig av nettleserstørrelse eller konfigurert til å ha et angitt antall bilder med fleksibel avstand mellom bildene etter behov. Du kan ha mer enn en karusell på en side og gi hver av dem en annen hud.

Integrasjonen med Flickr-fotostrømmen og Flickr API er en fin funksjon som ikke sees i de fleste skript. Den er testet for å fungere i flere nettlesere, inkludert den beryktede Internet Explorer 6.

Du spør deg kanskje hvorfor du vil bruke dette i stedet for en enkel gif-animasjon som du kan lage i Photoshop. Hovedårsaken er at det er enkelt å oppdatere karusellen når den er installert. Det er lettere å bytte innhold i UL-listen enn å lage et nytt gif hver gang du trenger å ha et annet sett med bilder.

//sorgalla.com/projects/jcarousel/

Video Instruksjoner: jQuery Tutorial #6 - Building a jQuery Image Slider (Kan 2024).