Se connecter / S'enregistrer
Votre question

Défilement d'image auto en js

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
10 Septembre 2010 22:16:32

Hello,
Bon en ce moment j'en pose pas mal de question, mais après avoir fouiller google, lbb, hot script, l'ejs et bien d'autre ...


Je cherche un script javascript ou ajax qui me permettrait de faire défiler des images thumb automatiquement une fois le curseur positionné sur l'image en question (bon le onmouseover je sais faire :p )

exemple, j'ai une boucle d'affichage en php/sql qui affiche 10 article, pour chaque article j'ai comme variable :

$thumb
$thumb2
$thumb3
$thumb4
$thumb5
$thumb6

chacune des variable contient l'url complete de l'image.

et à l'affichage, faudrait qu'au passage de la souris, le défilement commence dès la thumb 2, enfait, je souhaite le meme résultat que les site de tube.

Un truc simple du genre : <img src="$thumb" onmouseover="('$thumb2','$thumb3','$thumb4','$thumb5','$thumb6',200)">

pour l'explication, entre les quote, l'url de l'image, et le nombre 200 est le délai pour l'affichage de la thumb suivante, puis faudrait que cela reparte en double.

Je sais, j'en demande beaucoup, mais mes recherche via mon gogole (:p ) avec "script roll thumbnail" et autre dérivé me renvoie que sur des script style diapo, gallerie, menu en css ou rollover en css, et c'est pas du tout ce que je cherche, bref, meme une petite piste m'irait très bien.

A vrai dire, je ne sais meme pas sur quelle base chercher pour commencer un script, ou meme, je ne sais pas si j'utilise les bon terme de recherche.

Merci

Autres pages sur : defilement image auto

a c 232 L Programmation
11 Septembre 2010 00:03:54

Salut,

En utilisant du setTimeout et en changeant automatiquement la valeur de src ça le fait pas ?
m
0
l
12 Septembre 2010 22:04:47

OmaR a dit :
Salut,

En utilisant du setTimeout et en changeant automatiquement la valeur de src ça le fait pas ?


Merci omar, suite à ton idée, j'ai regardé et fouillé un peut ce que je trouve avec image timeout javascript, et je suis tombé sur un code de javascriptfr :
http://www.javascriptfr.com/forum/sujet-ROLLOVER-AVEC-P...

Sur cette base, j'ai donc fait ceci :

  1. <script language="JavaScript">
  2. <!--
  3. //PLF-<a href="http://www.jejavascript.net/" rel="nofollow" target="_blank">http://www.jejavascript.net/</a>
  4.  
  5. /**
  6. * Changement d'image
  7. *
  8. * @param pictNumber
  9. * numéro à prendre en compte pour les enregistrement
  10. */
  11. function changer(pictNumber) {
  12. numero++;
  13. if (numero > nom[pictNumber].length ) numero = 0;
  14. document.getElementById("image"+(pictNumber+1) ).src=nom[pictNumber][numero];
  15. roll=window.setTimeout('changer('+pictNumber+')',550)
  16. }
  17.  
  18. /**
  19. * Arrêt du timer
  20. */
  21. function initial() {
  22. window.clearTimeout(roll);
  23. }
  24.  
  25. //-->
  26. </script>


A part viré la fonction de préchargement, je n'ai rien touché dans le code JS.

Mais adapter comme suit pour la boucle avec php (boucle d'affichage while() :

  1. <script language="JavaScript">
  2. <!--
  3. var nom = [ ["<?php echo $aff['url_thumb']; ?>3.jpg", "<?php echo $aff['url_thumb']; ?>6.jpg", "<?php echo $aff['url_thumb']; ?>9.jpg"], ["<?php echo $aff['url_thumb']; ?>12.jpg", "<?php echo $aff['url_thumb']; ?>15.jpg"] ];
  4. var numero = 0;
  5. -->
  6. </script>
  7. <img id="image<?php echo $aff['id_video']; ?>" src="<?php echo $aff['url_thumb']; ?>1.jpg" onMouseOut="initial()" onMouseOver="changer(0)">
  8. <?php } ?>


Je pensais mon idée bonne, mais cela ne marche pas, en effet, quand je passe la souris sur n'importe quelle image, seul la premiere se voit affecté par le script, et encore, j'ai que 2 image qui défile aulieu des 5 inscrite dans le tableau, ce que je ne comprend pas, c'est que pourtant je nomme les image avec id="image($id_video)"

Merci
m
0
l
Contenus similaires
Pas de réponse à votre question ? Demandez !
a c 232 L Programmation
12 Septembre 2010 23:35:54

Salut,

Dans ton tableau il n'y a que 3 images pour ton 1er élément et 2 images pour ton 2ème. C'est un tableau à 2 dimensions que tu as. Je suppose que tu as repris le code de la personne, mais il avait un tableau à 2 dimensions, avec 3 éléments pour la 1ère image et 3 éléments pour la 2ème, tu as un peu tout mélangé sans faire attention je pense ;) 
En le réécrivant avec un peu d'indentation:
  1. var nom =
  2. [
  3. [
  4. "<?php echo $aff['url_thumb']; ?>3.jpg",
  5. "<?php echo $aff['url_thumb']; ?>6.jpg",
  6. "<?php echo $aff['url_thumb']; ?>9.jpg"
  7. ],
  8. [
  9. "<?php echo $aff['url_thumb']; ?>12.jpg",
  10. "<?php echo $aff['url_thumb']; ?>15.jpg"
  11. ]
  12. ];



Tu as bien mis changer(1) pour la 2ème image, changer(2) pour la 3ème, etc... ? Tu devrais avoir les images 12 et 15 apparaitre pour ta 2ème image normalement, vu ton tableau.
m
0
l
13 Septembre 2010 00:08:45

Merci Omar, effectivement, je n'avais pas vu le deuxieme tableau qui suivait ...

Et je n'ai pas penser non plus à incrémenter changer(), chose que j'ai maintenant corrigé avec un $i en php qui s'incrémente, voici le résultat généré avec ma boucle while() :

  1. <script language="JavaScript">
  2. <!--
  3. var nom = [ ["/images/002/003/657/small3.jpg", "/images/002/003/657/small6.jpg", "/images/002/003/657/small9.jpg","/images/002/003/657/small12.jpg","/images/002/003/657/small15.jpg"]];
  4. var numero = 0;
  5. -->
  6. </script>
  7. <img id="image1" src="/images/002/003/657/small1.jpg" onMouseOut="initial(0)" onMouseOver="changer(0)">
  8.  
  9. <script language="JavaScript">
  10. <!--
  11. var nom = [ ["/images/002/004/261/small3.jpg", "/images/002/004/261/small6.jpg", "/images/002/004/261/small9.jpg","/images/002/004/261/small12.jpg","/images/002/004/261/small15.jpg"]];
  12. var numero = 1;
  13. -->
  14. </script>
  15. <img id="image2" src="/images/002/004/261/small1.jpg" onMouseOut="initial(1)" onMouseOver="changer(1)">


Dans l'ordre :
- si j'affiche un seul enregistrement (donc une seul image) les 5 images défile bien
- si j'affiche 2 enregistrement ou plus, le changement d'image sur la premiere image se fait en prenant la valeur des images du dernier enregistrement affiché, et aucune autre thumb ne fonctionne.
- je patoge ... car cette fois tout est incrément par 1 en partant de 0 pour les tableau, avec un tableau par image.
- Et si je met id="image0" et id="image1" pour le premier et deuxieme image, ca ne change rien.

bref, ça doit etre un truc tout con ...

merci beaucoup de ton aide.
m
0
l
a c 232 L Programmation
13 Septembre 2010 09:22:49

En fait, le problème c'est que tu réinitialises à chaque fois ton tableau "nom". Si tu veux garder le même principe que lui, il te faut un tableau nom à deux dimensions comme tu avais avant.
Quelque chose du genre:
  1. <script language="JavaScript">
  2. <!--
  3. var nom = [ ["/images/002/003/657/small3.jpg", "/images/002/003/657/small6.jpg", "/images/002/003/657/small9.jpg","/images/002/003/657/small12.jpg","/images/002/003/657/small15.jpg"],
  4. ["/images/002/004/261/small3.jpg", "/images/002/004/261/small6.jpg", "/images/002/004/261/small9.jpg","/images/002/004/261/small12.jpg","/images/002/004/261/small15.jpg"]];
  5. var numero = 0;
  6. -->
  7. </script>
  8. <img id="image1" src="/images/002/003/657/small1.jpg" onMouseOut="initial(0)" onMouseOver="changer(0)">
  9.  
  10. <img id="image2" src="/images/002/004/261/small1.jpg" onMouseOut="initial(1)" onMouseOver="changer(1)">


Normalement comme ça, ça devrait le faire pour les 2 images.

Le problème, c'est que ta variable nom, elle va devenir vachement merdique au fur et à mesure, surtout si t'as pas mal d'images.
Tu as l'air de toujours utiliser les images 3, 6, 9, 12 et 15. Du coup, tu n'as potentiellement pas besoin d'avoir tous ces chemins. Tu pourrais par exemple ajouter un attribut perso à ton img:
  1. <img id="image1"... folder="/images/002/003/657"... />

Et comme ça, plutôt que d'utiliser ta variable nom, tu utilises l'URL du folder auquel tu concatènes "small3.jpg", "small6.jpg", etc... Et tu ne t'embêtes pas à devoir créer un tableau énorme en javascript.

Edit: sinon plutôt qu'un attribut folder en plus, tu peux parser l'attribut src pour récupérer le dossier, certainement plus approprié.
m
0
l
13 Septembre 2010 13:34:05

Merci omar pour l'éclaircissement, je n'avais pas bien compris le sens du tableau "nom", je pensais que cela faisait comme pour php, c'est à dire, dans la boucle, la variable/tableau prend la valeur la plus récente écrite (ex $var = 1; $var = 2; echo $var // affichera 2), et je pensais faire pareil avec le js.

Bref, je vais tester, et si c'est bien ca, je vais essayer de trouver une solution car comme tu la souligné, cela va être merdique, va falloir que je fasse 2 boucle pour afficher l'une les données, l'autre le tableau avec les image, mwarf !

;o)
m
0
l
13 Septembre 2010 13:43:12

Et il 'ya pas un moyen d'utiliser un tableau par image ?

Car, dans la boucle, si je met var nom$i pour l'incrémenter, cela ne fonctionne pas non plus.

Je pense qu'il faudrait rajouter une variable dans la fonction :

function changer(pictNumber) {
numero++;
if (numero > nom[pictNumber].length ) numero = 0;
document.getElementById("image"+(pictNumber+1) ).src=nom[pictNumber][numero];
roll=window.setTimeout('changer('+pictNumber+')',550)
}

du style :

function changer(pictNumber,nomimage) {
numero++;
if (numero > nom[pictNumber].length ) numero = 0;
document.getElementById("image"+(pictNumber+1) ).src=nom[pictNumber][numero];
roll=window.setTimeout('changer('+pictNumber+')',550)
}

pour attribuer le tableau "nom" à l'image x, afin d'avoir un tableau d'image par ligne par enregistrement vu que c'est une boucle, enfait c'etait mon idée de départ comme expliqué mais c'est plus difficile que dans la théorie :p 
m
0
l
13 Septembre 2010 14:30:27

Après un test, j'ai réussi mais avec l'éxécution de la meme requete SQL, une pour les données, l'autre pour afficher le tableau :/ 

Ce script à aussi quelque lacune, par exemple, lorsqu'il renouvelle son roll sur une image, cela produit un petit flash ... huhu :D 
m
0
l
13 Septembre 2010 16:52:07

Et question con, vu que tu as l'air confirmé dans le JS, peut t'on pas faire un truc encore plus simple, par ex :

<img src=".jpg" onmouseover="('thumb2.jpg','thumb3.jpg','thumb4.jpg','thumb5.jpg');rotate(4,500);" onmouseout="this.img.src='thumb1.jpg'">

L'idée serait qu'il change l'image toute les 0.5s (d'ou le 500 dans le rotate) avec les thumb présent dans ce tableau

J'ai déja vu ce procéder pour une image sur le onmouseover this.img.src mais l'adapter pour 5 thumb de plus, je vois pas ...
m
0
l
a c 232 L Programmation
13 Septembre 2010 20:27:15

okinou a dit :
Merci omar pour l'éclaircissement, je n'avais pas bien compris le sens du tableau "nom", je pensais que cela faisait comme pour php, c'est à dire, dans la boucle, la variable/tableau prend la valeur la plus récente écrite (ex $var = 1; $var = 2; echo $var // affichera 2), et je pensais faire pareil avec le js.

Ouais, en javascript c'est pas pareil parce qu'il exécute tout le code qui n'est pas dans des fonctions au chargement de la page, du coup pas moyen de faire ça comme ça.

okinou a dit :
Après un test, j'ai réussi mais avec l'éxécution de la meme requete SQL, une pour les données, l'autre pour afficher le tableau :/ 

Ce script à aussi quelque lacune, par exemple, lorsqu'il renouvelle son roll sur une image, cela produit un petit flash ... huhu :D 


En fait, je pense que ton problème de flash c'est qu'il faut qu'il charge l'image. D'où le fait que la plupart des trucs comme ça fasse du pré-chargement et n'affiche les images qu'une fois qu'elles sont chargées.

okinou a dit :
Et question con, vu que tu as l'air confirmé dans le JS, peut t'on pas faire un truc encore plus simple, par ex :

<img src=".jpg" onmouseover="('thumb2.jpg','thumb3.jpg','thumb4.jpg','thumb5.jpg');rotate(4,500);" onmouseout="this.img.src='thumb1.jpg'">

L'idée serait qu'il change l'image toute les 0.5s (d'ou le 500 dans le rotate) avec les thumb présent dans ce tableau

J'ai déja vu ce procéder pour une image sur le onmouseover this.img.src mais l'adapter pour 5 thumb de plus, je vois pas ...


Hmm, j'ai pas spécialement le temps d'essayer des trucs. Mais j'imagine que ce qu'il faudrait ça serait :
- de créer une classe dont le constructeur prendrait en argument un tableau avec tes différentes images. Tu pourrais alors stocker tes images dans une variable de la classe pour les réutiliser dans les méthodes.
- ta classe aura 2 méthodes, une pour commencer le rotate et une pour l'arrêter
- la méthode rotate a un argument qui prend le numéro de l'image à afficher
- tu appelles le rotate au mouseover et le stop au mouseout
- ta méthode rotate aura le principe de setTimeout en ré-appelant rotate avec l'image n+1 de ton tableau
- ta méthode stop remettrait l'URL par défaut


Si tu veux, un site pour adultes ( :whistle:  ) qui fait ça avec une source à peu près claire : http://js.youporn.com/r/20100909.5/script/thumbchange-r...
(désolé, les seuls sites qui font ça que j'ai en tête c'est des sites pour adultes :p )
m
0
l
14 Septembre 2010 10:46:34

Ouai, bon je crois que je vais le mettre de coté pour l'instant ce roll jusqu'a temps de trouver un truc valable ... merci de ton coup de main tout de meme ;) 
m
0
l
14 Septembre 2010 12:13:58

salut crazy, j'ai déja parcouru tous ces liens lors de mes recherche, ce que je veux n'est pas une gallerie dynamique mais un enchainement d'image comme sur les site adulte, le seul qui aurait pu m'aider est : http://www.malsup.com/jquery/cycle/ que tu cite également, mais dans toute les démo qu'il propose, je n'ai rien vu concernant ce que je cherchais.
cordialement
m
0
l
a c 232 L Programmation
14 Septembre 2010 12:25:05

Il faudrait avoir quelques infos de plus:
1) est-ce que, pour une image donnée, toutes les images associées sont dans le même répertoire ?
2) est-ce que les noms des images sont toujours les mêmes ?


Parce que j'ai essayé de faire un test qui ressemble à ce que tu voulais:
  1. <img src=".jpg" onmouseover="('thumb2.jpg','thumb3.jpg','thumb4.jpg','thumb5.jpg');rotate(4,500);" onmouseout="this.img.src='thumb1.jpg'">



Voilà ce que j'ai fait:
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function Test(el, images, timeout) {
  5. this.el = el;
  6. this.images = images;
  7. this.timeout = timeout;
  8. this.animate(1);
  9. }
  10.  
  11. Test.prototype.animate = function(num) {
  12. this.el.src = this.images[num];
  13. var next = (num == this.images.length - 1) ? 0 : num + 1;
  14. setTimeout((function(obj, i) {
  15. return function() { obj.animate(i); }
  16. })(this, next), this.timeout);
  17. }
  18. </script>
  19. </head>
  20. <body>
  21.  
  22. <img id="thumb1" src="1.png" onmouseover="new Test(this, ['1.png', '2.png', '3.png', '4.png', '5.png'], 500);" onmouseout="this.src='1.png';" />
  23.  
  24. </body>
  25. </html>


Mais il y a plusieurs problèmes :
- un nouvel élément Test est créé à chaque fois que l'on fait un mouseover
- le onmouseout ne fonctionne pas vu que c'est basé sur du setTimeout. Si on mouseout, ça va repasser à la 1ère image pendant moins de 500ms, vu que le setTimeout ne s'arrêtera pas et que animate continuera de tourner
- et le mélange des deux fait que si tu fais 10 mouseover à la suite sur l'image, ça va tourner à 200 à l'heure.


Donc, le truc, c'est qu'il faudrait créer l'objet indépendamment du onmouseover, afin de pouvoir le réutiliser dans le onmouseout. Mais pour pouvoir faire ça, il va falloir s'inscrire aux évènements différemment.
C'est ce que le .js que je t'ai filé dans ma précédente réponse fait.
La seule différence est qu'il se base sur yahoo, donc il y a quelques modifications à faire pour la gestion des évènements, mais ça peut être réutilisé facilement, encore faudrait-il avoir les infos que je t'ai demandé juste au-dessus ;) 
m
0
l
14 Septembre 2010 14:07:07

je t'ai mp omar :) 
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS