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
- Voir la page de démonstration.
- Colorbox est disponible sur Github.
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 ! →
BasicSlider — « Slider » horizontal et vertical avec jQuery
BasicSlider est un diaporama (carrousel, slider, etc.) créé par Jonathan Thuau qui permet de faire défiler du contenu (textes, images ou les deux) horizontalement ou verticalement, automatiquement ou manuellement. Parmi les fonctionnalités on trouve : →
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.
Simple Image Viewer — Galerie d’image minimaliste
L’affichage d’une galerie d’images avec des miniatures menant vers la taille réelle est une chose relativement commune sur le web. Simple Image Viewer allie une simplicité confondante pour un maximum d’impact (le script se contente des effets slideUp and slideDown intégrés à jQuery). →
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 : →