jQuery jCarousel Script

• Mai 19, 2024

jQuery a fait de l'ajout d'images à des sites Web une tâche facile. Il existe de nombreux scripts jQuery publiés sous les licences MIT et / ou GPL. La plupart d'entre eux sont des scripts plug-and-play (plug-in) qui ne nécessitent aucune connaissance en programmation pour être utilisés sur votre site Web ou installés sur le site de votre client. Vous pouvez envisager d'ajouter des scripts jQuery à vos services de conception.

Un tel script jQuery par Jan Sorgalla est jCarousel. Ce plug-in peut avoir de nombreuses applications pour les graphiques et le texte. La fonction principale du script est de faire défiler le contenu horizontalement ou verticalement. Le contenu peut être statique ou chargé dynamiquement via Ajax, JavaScript, PHP ou Flickr. Bien entendu, cette deuxième option nécessite une connaissance de ces langues. jCarousel fonctionne également avec Thickbox 3 afin qu'une image de grande taille s'ouvre dans Thickbox lorsque vous cliquez sur l'image miniature dans le carrousel.

La plupart du code du script est référencé dans la section Head de la page Web. Vous aurez besoin de la bibliothèque jQuery et du code source jCarousel et des fichiers de feuille de style. Ce qui est bien avec ce plugin, c'est qu'il peut être "skinné" par CSS pour avoir plusieurs looks. Le contenu à faire défiler par le script est placé dans le corps de la page Web dans une liste UL de base.

Vous disposez de plusieurs options pour configurer le script, notamment l'ajout d'animations personnalisées et l'accélération. Il peut fonctionner avec des boutons de défilement automatique ou de navigation. Une autre fonctionnalité intéressante est que la largeur du carrousel se redimensionne automatiquement pour s'adapter à la fenêtre du navigateur. Il peut être configuré pour afficher plus ou moins d'images en fonction de la taille du navigateur ou configuré pour avoir un nombre défini d'images avec un espacement flexible entre les images selon les besoins. Vous pouvez avoir plus d'un carrousel sur une page et donner à chacun d'eux un skin différent.

L'intégration avec le flux de photos Flickr et l'API Flickr est une fonctionnalité intéressante que l'on ne voit pas dans la plupart des scripts. Il a été testé pour fonctionner dans plusieurs navigateurs, dont le célèbre Internet Explorer 6.

Vous vous demandez peut-être pourquoi vous utiliseriez cela au lieu d'une simple animation gif que vous pouvez créer dans Photoshop. La raison principale est la facilité de mise à jour du carrousel une fois installé. Il est plus facile de changer de contenu dans la liste UL que de créer un nouveau gif chaque fois que vous avez besoin de présenter un ensemble d'images différent.

//sorgalla.com/projects/jcarousel/

Instructions Vidéo: jQuery Tutorial #6 - Building a jQuery Image Slider (Mai 2024).