Recherche script défilement image avec yui

Salut,

je ne sais pas si cela existe tout fait, mais le documentation de yui étant bien faite ce ne doit pas être trop compliqué.

Tu peux essayer avec Animation Utility: Animated Scrolling

Tu mets tes images dans un tableau pour être sur que celui ci prend automatiquement la taille de toute tes images et ensuite tu mets ce tableau dans un div en overlow hidden (auto pour js désactivé)

<div id="autoscroll">
<table><tr>
  <td><img src="image1.jpg" alt="" /></td>
  <td><img src="image2.jpg" alt="" /></td>
  <td><img src="image3.jpg" alt="" /></td>
  <td><img src="image4.jpg" alt="" /></td>
</tr></table>
</div>

ensuite tu scroll avec Yahoo :

var autoScroll = document.getElementById('autoscroll');
var scrollLimit = autoScroll.scrollWidth;
var anim = new YAHOO.util.Scroll('autoscroll', { 
    scroll: { to: [0, scrollLimit] } 
}); 
YAHOO.util.Event.on(window, 'load', function() { 
   anim.animate(); 
});

La subtilité et d'arrêter le scroll au bout pour le recommencer au début, mais ça je sais pas faire!

Cela doit être possible en utilisant anim.onComplete :

YAHOO.util.Event.on(window, 'load', function() { 
   anim.onComplete.subscribe(startAgain);
   anim.animate(); 
});

Bref a tester, comme je connais pas trop YUI, je te laisse essayer .
Modifié par matmat (28 Aug 2008 - 16:52)

Merci pour cette réponse.

J'ai effectivement bricolé quelques chose qui fait l'affaire avec Anim.Scrolling. Le résultat est visible ici : http://www.oanisha.com/scrol.htm.

Le problème est que j'ai un arrêt de défilement entre la fin du 1er défilement de la série d'image et la reprise du défilement.

Cette arrêt est du à la duration définie dans la fonction de scroll (5 en l'occurence)

var moveleft = new YAHOO.util.Scroll('V2_C2_BrandLogo', attributesleft, 5);

En fait la fin du défilement intervient avant la fin de l'animation ce qui provoque un "blanc".

Si quelqu'un a une idée, je suis preneur.
Merci

En fait il y avait une erreur dans mon exemple, qui était que la valeur scroll est en fait un tableau de x et y, donc dans ton cas on ne s'occupe même pas de la deuxiéme valeur qui modifie le scrollTop, mais seulement de la premiére.

Autre chose si tu veux obtenir un défilement sans fin tu vas être obligé de dupliquer les cellules du début pour les remettre à la fin, tu peux le faire en html mais cela vat compliquer tes calculs pour trouver le point initial. Il vaut mieux utiliser cloneNode de javascript

Ce qui donne :

(function() { 
   var scrollBox = document.getElementById('V2_C2_BrandLogo');

   //scrollLimit est tout simplement la taille totale de l'element
   var scrollLimit = scrollBox.scrollWidth;
   scrollBox.scrollLeft = 0;
   var attributesleft = { scroll: { to: [scrollLimit, 0] } };
   var moveleft = new YAHOO.util.Scroll('V2_C2_BrandLogo', attributesleft, 10);

   //duplique les dix premieres cellules a la fin du tableau
   var td = scrollBox.getElementsByTagName('td');
   for(var j=0;j<10;j++){
      var newTd = td[j].cloneNode(true);
      var scrollContent = scrollBox.getElementsByTagName('tr')[0];
      scrollContent.appendChild(newTd);
   }

   YAHOO.util.Event.on(window, 'load', function() {
      moveleft.animate();
   });
		
   moveleft.onComplete.subscribe(function() { 
      //on reppart au debut
      scrollBox.scrollLeft = 0;
      moveleft.animate();
   });

})();

Voilà comme ça ce devrait marcher
Modifié par matmat (31 Aug 2008 - 00:59)