jQuery jCarousel Script

• Mei 8, 2024

jQuery heeft het toevoegen van afbeeldingen aan websites gemakkelijk gemaakt. Er zijn veel jQuery-scripts uitgegeven onder de MIT- en / of GPL-licenties. De meeste hiervan zijn plug-and-play (plug-in) scripts die geen programmeerkennis vereisen om op uw website te gebruiken of op de site van uw klant te installeren. Misschien wilt u overwegen jQuery-scripts toe te voegen aan uw ontwerpservices.

Een dergelijk jQuery-script van Jan Sorgalla is jCarousel. Deze plug-in kan veel toepassingen hebben voor zowel afbeeldingen als tekst. De hoofdfunctie van het script is om inhoud horizontaal of verticaal te scrollen. De inhoud kan statisch zijn of dynamisch worden geladen via Ajax, JavaScript, PHP of Flickr. Natuurlijk vereist deze tweede optie bekendheid met deze talen. jCarousel werkt ook met Thickbox 3, zodat een grote afbeelding wordt geopend in Thickbox wanneer op de miniatuurafbeelding in de carrousel wordt geklikt.

Naar de meeste code voor het script wordt verwezen in het hoofdgedeelte van de webpagina. U hebt de jQuery-bibliotheek en de jCarousel-broncode en stylesheet-bestanden nodig. Het leuke aan deze plug-in is dat deze door CSS kan worden "gevild" om er veel uit te zien. De inhoud die door het script moet worden gescrolld, wordt in de hoofdtekst van de webpagina in een standaard UL-lijst geplaatst.

U hebt verschillende opties voor het configureren van het script, waaronder het toevoegen van aangepaste animatie en versoepeling. Het kan werken met automatisch scrollen of navigatieknoppen. Een andere leuke functie is dat de breedte van de carrousel automatisch wordt aangepast aan het browservenster. Het kan worden geconfigureerd om meer of minder afbeeldingen weer te geven, afhankelijk van de browsergrootte, of worden geconfigureerd om een ​​ingesteld aantal afbeeldingen te hebben met een flexibele afstand tussen de afbeeldingen indien nodig. U kunt meer dan één carrousel op een pagina hebben en elk van hen een andere skin geven.

De integratie met de Flickr-fotostream en Flickr API is een leuke functie die niet in de meeste scripts voorkomt. Het is getest om te werken in verschillende browsers, waaronder de beruchte Internet Explorer 6.

Je vraagt ​​je misschien af ​​waarom je dit zou gebruiken in plaats van een eenvoudige gif-animatie die je in Photoshop kunt maken. De belangrijkste reden is het gemak van het bijwerken van de carrousel nadat deze is geïnstalleerd. Het is gemakkelijker om van inhoud in de UL-lijst te wisselen dan om een ​​nieuwe gif te maken telkens wanneer je een andere set afbeeldingen nodig hebt.

//sorgalla.com/projects/jcarousel/

Video-Instructies: jQuery Tutorial #6 - Building a jQuery Image Slider (Mei 2024).