139 ressources Javascript et jQuery

Cette liste de liens pour le développeur web front-end est issue de la veille documentée que j’effectue sur Javascript & Webdesign — Les meilleures ressources Javascript pour développeurs web front-end (avec parfois un soupçon de PHP) — depuis plus de 6 mois. A quelques exceptions près, les resssources pointent directement sur les articles d’origine. La liste est affichée dans l’ordre où j’ai rédigé les billets : les plus anciens en premier par paquet de 10 pour aérer la lecture parce que vous le valez bien.

Colorbox — une « lightbox » légère et extensible en jQuery

Colorbox — Cette petite lightbox légère et personnalisable est le cadre idéal pour accueillir vos photos, vos textes ou vos vidéos. Réalisé avec jQuery, Colorbox est extensible : ajout de fonctions de rappel ou de points d’ancrage événementiels sans pour autant être obligé de modifier les fichiers d’origine. Fonction de diaporama avec marche/arrêt, boutons Suivant ou Précédent et navigation au clavier, ce qui ne gâche rien. Le design de Colorbox est très bien pensé et trouvera sa place sur tous type de sites web.

jQuery Popeye 2.0 — Une Lightbox inline

Popeye 2.0 est une lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte. Le marquage HTML est à votre discrétion à condition d’utiliser les classes CSS prévues par le script. Il est possible d’afficher une légende par image en enveloppant le texte de votre choix avec l’élément span.

Splash — un diaporama en pur Javascript

Splash est un script permettant d’afficher une image par-dessus le contenu dans le sillage de Lightbox (devenu en quelques années une marque générique comme Frigidaire) sans être obligé d’installer jQuery ou Prototype, ce qui est assez rare pour être signalé. Xuxu voulait une lightbox à son goût, simple, bien codée et rapide, alors il a associé le talent à l’envie, et Splash !

Carrousel fonctionnel sans Javascript

Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif. Ce Carrousel est d’abord pensé pour fonctionner en HTML et CSS et peut bénéficier des améliorations apportées par Javascript (en l’occurrence jQuery) pour avoir des transitions plus funky entre les contenus. Via JPV.

Diaporama avec navigation au clavier (flèche droite et flèche gauche)

Adding Keyboard Navigation est un tutoriel expliquant pas à pas la mise en place d’un diaporama avec la possibilité d’utiliser le clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente. Chez Remy Sharp, les tutoriels sont vraiment très bien fait. On trouve le tutoriel proprement dit avec les explications de code, la démonstration pour juger sur pièce et le code prêt à être copié-collé, sans oublier les commentaires, souvent utiles.

TinySlider — un diaporama léger en Javascript

TinySlider est un diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS. On peut intégrer autre chose que des images et la gracieuse dégradation est assurée en l’absence de Javascript sur l’agent utilisateur du visiteur. Le script possède des options pratiques comme vous pouvez le voir sur l’exemple d’appel au script :

var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider', // ID of the parent slideshow div
    auto:3, // Seconds to auto-advance, defaults to disabled
    resume:true, // Resume auto after interrupted, defaults to false
    vertical:false, // Direction, defaults to false
    navid:'pagination', // Optional ID of direct navigation UL
    activeclass:'current', // Class to set on the current LI
    position:0 // Initial slide position, defaulting to index 0
});

Voir la démonstration.

Un diaporama avec AnythingSlider jQuery Plugin

Voici un diaporama de très bonne facture qui fera le bonheur de tous. Le contenu de chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.) et chacune d’elle peut être directement accessible via un système d’onglet. Mais trêve de bavardage, je vous laisse avec la démo, le lien de téléchargement et l’exemple d’appel du slideshow avec ses paramètres :