Web, Applications agiles et Ruby on Rails

Un Slideshow vite-fait-bien-fait® avec Prototype

L’idée est d’avoir préalablement les noms de toutes les images d’un diaporama au sein d’un tableau en JSON (dans mon cas, je génère tout ça en même temps que la page, mais libre à vous d’obtenir ce tableau avec AJAX) ; le JS ci-dessous se charge ensuite d’alterner les images avec le fondu/enchainé qui va bien. Efficace, pratique et concis.

function startSlide(pics,id){
  var a = 1;//la première image est affichée au chargement de la page  
  new PeriodicalExecuter(function(){  
    new Effect.Fade(id, { 
      duration: 1, 
      fps: 50,
      afterFinish: function() {     
        $(id).src = "/images/"+pics[a];
        (a < pics.length-1) ? a++ : a = 0;    
        new Effect.Appear(id, {
          duration: 1,
          fps: 50,
          queue:'end'
        })   
      }
    })       
  }, 5);
  return true
}

Pour les paramètres :

• id : id CSS de votre tag IMG qui affiche les images
• pics : tableau JSON contenant les noms de vos images

N’oubliez pas pas le “return true” à la fin, sans quoi IE va crier au stackoverflow

… et le tout se démarre comme ça

document.observe("dom:loaded", startSlide(
  ['image_1.jpg','image_2.jpg','image_3.jpg'],
  'id_de_mon_tag_IMG'
  )
);

Testé dans IE6/7/8/Safari/Firefox. Enjoy :-)