Jump to content

Image + Texte défilant avec AJAX Loader ?


Recommended Posts

Bonjour tout le monde :incline: ,

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 ! :chinois:

Link to comment
Share on other sites

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']");

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :transpi:), 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... :francais: ) 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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...