Image + Texte défilant avec AJAX Loader ?

[didipc]

Bonjour tout le monde ,

J'aimerais faire un système de texte et images défilent de haut en bas :

http://www.soummam.org le fait mais avec une balise marquee.

Je vous demande donc si il existe des sortes de slides en AJAX car a l'ouverture de la page tout est chargé en même temps hors j'aimerais que sa soit chargé petit

a petit et que sa fasse un effet de fondu.

Je ne sais pas si c'est possible avec Jquery ou mootols et du moins je ne sais pas comment faire.

Merci beaucoup a tous ceux qui m'aiderons !

[didipc]

Personne ?

[didipc]

Même pas d'idées ?

[Mephisto]

bah, n'ayant pas touche a AJAX, je dirai que le plus simple est de le faire en javascript

sur google, on touve quelques morceaux de code

en gros, t'affiche ta premiere image, et a intervalles regulier tu charge une nouvelle image

tu colle deux div (image actuelle et en dessous, ancienne image)

tu te fais un timer qui au bout de 5 secondes (par exemple) fait disparaitre l'ancienne image (la nouelle apparait donc par en-dessous ; sous firefox, il faut jouer avec opacity, sous IE, aucune idee)

a la fin du timer, tu modifie le innerHTML de tes deu div, pour faire passer la nouvelle image dans l'ancienne, et t'appele un script php avec en agument l'identifiant de la preecdante, qui te renvera la nouvelle (une sorte de <img id='new' src='pict.php?old=<?=$oldimage?>' />) et dans pict.php, tu colles les header jpg et tu fais un passthru("cat $images['id']");

[didipc]

Ou sinon un loader AJAX ? Sa feras déja attendre ....

[tereo]

Je pense pas que de l'Ajax soit la solution de ton probleme !

Si ton slide contient des données fixes, je te conseil une anim flash. Pour faire ca c'est pas compliqué et tu pourras faire un fondu etc comme bon te semble !

[theocrite]

Hm du bon flash bien lourd pour quelqu'un qui demande quelque chose de léger.

Et puis c'est bien comme ça grâce à flash tu ne pourra plus zoomer sur tes images ou les enregistrer pour les consulter offline.

C'est beau le progrès.

[didipc]

Non mais je vais changer le titre, car finalement c'est des images + un titre en HTML qui est affiché.

Mais je ne trouve pas de script AJAX qui charge seulement un div particulier.

[BreizFenrir]

Alors une manière de faire les choses :

• Tu mets les informations que tu veux afficher dans un div, qui sera la partie à défiler. Le div doit avoir la propriété CSS position égale à 'relative'.
  
• Tu mets ce div dans un autre div, avec la propriété CSS overflow à 'hidden' et une taille définie. Grâce à overflow, ce div va faire office de "fenêtre" (comme dans la vraie vie, pas comme sur ordi ), de sorte que seul ce qui est en face de l'"ouverture" (le div englobant) soit visible.
  
• Tu associes à l'événement onLoad du body la création d'un timer (via la fonction setInterval()) qui lancera à intervalles réguliers la fonction de gestion de l'animation.
  
• Dans cette fonction, tu utilises le DOM pour modifier le positionnement du div intérieur (modifie la propriétés top ou bottom pour un défilement vertical).
  

Normalement je t'ai donné les clefs pour faire un champ défilant simple. N'oublie pas par contre de remettre le div mobile "en haut" quand le défilement le fait quitter la zone visible.

Tu peux après te servir de cette base pour ajouter des effets comme par exemple arrêter le défilement quand la souris survole la zone, s'arrêter quelques secondes en face de chaque ligne/paragraphe pour laisser à l'utilisateur le temps de regarder, ou même mettre des effets d'accélération/décélération lors du défilement en ne modifiant pas la position de la même façon à chaque fois que le timer lance ta fonction.

En tout cas, pas besoin de faire des requêtes asynchrones sur le serveur pour ça, donc c'est plus DHTML qu'AJAX. Je n'ai pas encore appris à utiliser de framework AJAX (ma dernière mission au boulot concernait l'ajout de composants riches sur des interface devant être valides avec cette merde d'Internet Explorer Mobile, donc j'ai dû tout faire à la main... ) donc je suis moins en mesure de t'aider à les utiliser. Il y a des chances que l'on puisse faire ce que tu souhaites en deux lignes de code avec leur solution, alors que la mienne nécessite un petit peu plus de travail.

Tiens nous au courant.