Rédigé sur Alsacréations par Benjamin De Cock, ce tutoriel pour faire une galerie d’image avec jQuery est un cas d’école pour qui veut obtenir le résultat le plus simple possible visuellement tout en prenant en compte l’accessibilité le plus largement possible avec une démarche non intrusive. Je vous laisse avec la démo qui vaudra sûrement mieux qu’un long discours.
JQuery Slide Effect — Animation de texte au survol d’une image
JQuery Slide Effect est un tutoriel concis mais complet qui explique comment parvenir à un effet d’animation de texte (slide) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.) au survol d’icelle. La démo du Slide sera sûrement plus parlante 😉
Content Switcher — Un diaporama qui fonctionne aussi sans Javascript
Content Switcher est un Slider avec un menu de navigation qui a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur. La version Javascript améliore l’ordinaire avec un effet de fading réalisé avec jQuery pour les transitions entre les slides. Le marquage HTML et les CSS sont très simples à mettre en place : →
Evénement jQuery : Return False, preventDefault() ou bien ?
Dans jQuery Events: Stop (Mis)Using Return False, Douglas Neiner nous explique, avec moult exemples, toutes les subtilités relatives aux événements dans jQuery. Une des premières choses que l’on apprend en Javascript est d’empêcher les comportements par défaut liés aux liens ou aux formulaires (le lien sur lequel on l’applique n’est pas suivi par le navigateur, le formulaire ne « submit » plus, etc.).
Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery
Outre un nouveau design sombre que je trouve très réussi, Soh Tanaka nous offre une belle leçon de choses en utilisant le pseudo sélecteur :nth-child()
et une pincée de jQuery (compatibilité Internet Explorer oblige) pour donner du rythme à une liste de produits contenant des éléments récurrents de tailles différentes. Rassurez-vous, le concept est très bien expliqué avec moult illustrations dans l’article Advanced Columns using the :nth-child(N) 😉
Enterprise jQuery — Passez du côté client
Enterprise jQuery est un site Web qui s’adresse aux développeurs front-end. Il leur permettre de trouver des solutions aux défis auxquels ils sont confrontés dans leur travail au sein des moyennes ou grandes entreprises. Chacun trouvera matière à améliorer ses connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.
Transformer un plugin jQuery en extension WordPress
jQuery et WordPress ont en commun leur modularité : les plugins jQuery et les extensions WordPress permettent d’étendre les fonctionnalités de nos outils préférés. Le tutoriel montre comment utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress, de manière propre et efficace. →
jQuery Fundamentals — Manuel de survie pour jQuery
jQuery Fundamentals synthétise les éléments de syntaxe de jQuery sur une page web. La navigation s’effectue via un sommaire précis et structuré comprenant également un index des nombreux exemples utilisés. →
Retina Display — Effet loupe façon «iPhone 4» avec jQuery
Apple-like Retina Effect With jQuery est un tutoriel qui vous permettra de refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur lav version 4 de l’iPhone. Vraiment bluffant, d’autant plus que le marquage HTML nécessaire est des plus simples : →
Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow
Fancy Sliding Form — Ce script jQuery découpe un formulaire en autant de parties qu’il contient de fieldset
, accessibles via un menu qui les fait apparaitre sous forme de Slideshow. Cerise sur le gâteau, un symbole apparait sur chaque entrée de menu si les champs n’ont pas été renseignés. Ce tutoriel explique chaque étape : le marquage HTML, les feuilles de style CSS et le code Javascript. Jetez un oeil sur la démonstration. Via @LaFermeDuWeb.