jQuery jCarousel-script

• Kan 2, 2024

jQuery har gjort tilføjelse af billeder til websteder til en nem opgave. Der er mange jQuery-scripts frigivet under MIT- og / eller GPL-licenser. De fleste af disse er plug-and-play (plug-in) -skripter, der ikke kræver nogen programmeringsviden til at bruge på dit websted eller installere på din klients websted. Du kan overveje at tilføje jQuery-scripts til dine designtjenester.

Et sådant jQuery-script af Jan Sorgalla er jCarousel. Dette plug-in kan have mange applikationer til både grafik og tekst. Hovedfunktionen med scriptet er at rulle indhold vandret eller lodret. Indholdet kan være statisk eller indlæses dynamisk via Ajax, JavaScript, PHP eller Flickr. Naturligvis kræver denne anden mulighed kendskab til disse sprog. jCarousel fungerer også med Thickbox 3, så et stort billede åbnes i Thickbox, når der klikkes på miniaturebilledet i karrusellen.

Det meste af koden til scriptet henvises til i hovedafsnittet på websiden. Du har brug for jQuery-biblioteket og jCarousel-kildekoden og stilark-filerne. Det, der er rart med dette plug-in, er, at det kan "flås" af CSS for at have mange udseende. Det indhold, der skal rulles af scriptet, placeres i websiden på en grundlæggende UL-liste.

Du har flere muligheder for at konfigurere scriptet, herunder tilføje tilpasset animation og lette. Det kan fungere med automatisk rulning eller navigationsknapper. En anden dejlig funktion er, at bredden på karrusellen ændres automatisk til at passe til browservinduet. Det kan konfigureres til at vise flere eller færre billeder afhængigt af browserstørrelsen eller konfigureret til at have et sæt antal billeder med fleksibel afstand mellem billederne efter behov. Du kan have mere end en karrusel på en side og give hver af dem en anden hud.

Integrationen med Flickr-fotostrømmen og Flickr API er en dejlig funktion, der ikke ses i de fleste scripts. Det er testet, at det fungerer i flere browsere, inklusive den berygtede Internet Explorer 6.

Du spørger måske dig selv, hvorfor du ville bruge denne i stedet for en simpel gif-animation, som du kan oprette i Photoshop. Den vigtigste årsag er, at det er let at opdatere karrusellen, når den først er installeret. Det er lettere at skifte indhold på UL-listen end at oprette en ny gif, hver gang du har brug for et andet sæt billeder.

//sorgalla.com/projects/jcarousel/

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