JS : Slider d'images défilantes
Le Javascript c'est très bien mais les disparités entre navigateurs font que ce langage ne peut exprimer toute son élégance sans une série d'abstractions (comprenez fonctions et objets cachés). L'utilisation de jQuery simplifie ces manipulations browseriennes et on aboutit à du code très élégant comme il n'aurait jamais dû cesser de l'être.
La preuve ?
Je voulais faire un slider d'images, un visualiseur de diapositives en français, qui permet de passer à l'image suivante à l'aide d'un clic de souris. Le code repose sur du HTML très simple et référençable par un moteur de recherche : un DIV positionné en relative ou absolute contenant des IMG dont on doit spécifier les tailles et, si la variable ContainerId contient l'Id du DIV sus-mentionné, ça donne les 13 lignes qui suivent ainsi que la démo juste au-dessous.
var Left = MaxWidth = MaxHeight = 0
$("#container img").each(function(idx, item) {
$(this).css({"position":"absolute", "top":"0px", "left":Left+"px"})
Left += $(this).width()
MaxWidth = Math.max($(this).width(), MaxWidth)
MaxHeight = Math.max($(this).height(), MaxHeight)
$(this).click(function() {
var NextImg = $(this).next("img")
var ShiftPosition = !NextImg.length ? 0 : NextImg.css("left")
$("#container-inner-container").animate({"left":"-"+ShiftPosition}, 500, "swing")
})
}).wrapAll("<div id='container-inner-container'></div>")
$("#container-inner-container").css({position:"absolute", top:"0px", left:"0px", witdh:Left+"px", height:MaxHeight+"px"})
$("#container").css({overflow:"hidden", position:"relative", width:MaxWidth, height:MaxHeight})
Quant à son fonctionnement, c'était le premier slider que je faisais en jQuery, donc tout est assez basique : je donne une position absolue à toutes les images qui sont filles du container passé en paramètre et je les place toutes les une à la suite des autres avec une petite fonction qui réagit au clic souris pour chacune d'entre elle et qui exécute un scroll à la suivante, simplement en animant la propriété CSS left.
