Crée une fonction de photo 'slider'

Crée une fonction de photo 'slider' - HTML/CSS - Programmation

Marsh Posté le 13-11-2013 à 22:31:27    

Bonjour tout le monde !
 
J’ai un problème avec une function de défilement photo que j’essaies actuellement de crée.Je crois que c’est un problème de structure, car il est fonctionnel mais après quelques cliques pour défilé les images, il fait littéralement ‘’bugger’’ mon navigateur.
 
Voici ce que j’ai de fait du coté Jquery :
 

Code :
  1. (function( $ ){
  2.     /* AUTRE FUNCTION … ****/
  3.     /* Déroulement Photo ****/
  4.     $.fn.photoScroll = function(options) {
  5. var config = { leftArrow    : '#leftArrow',
  6.            rightArrow   : '#rightArrow',
  7.            photoSlider  : '#photoSlider',
  8.                photoUL  : '#photoUL',
  9.            scrollWidth  : 150,
  10.            scrollSpeed  : 300 }
  11.        
  12.            
  13. if (options){ $.extend(config, options); }
  14. $(config.leftArrow).on({'click': function() {
  15.     var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
  16.                      $(config.photoSlider).stop(true,true).animate({scrollLeft:( pos - config.scrollWidth)+'px'}, config.scrollSpeed);
  17.      }
  18. });
  19. $(config.rightArrow).on({'click': function() {
  20.     var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
  21.                                
  22.                
  23. $(config.photoSlider).stop().animate({scrollLeft: (pos+config.scrollWidth)+'px'}, config.scrollSpeed);
  24.                        
  25.                      }
  26.        
  27. });
  28. }
  29. })( jQuery );


 
Voici ce que ressemble mon code html (je vous épargne le CSS)  :
 

Code :
  1. <div id="photoToScroll" style="width:100%;">
  2.   <div id="leftArrow">&nbsp;</div>
  3.   <div id="rightArrow" style="  margin-right:0px;">&nbsp;</div>
  4.   <div id="center">
  5.     <div id= « photoSlider" >
  6.       <ul class="photoUL" id="photoUL">
  7.         <!—BEGIN-LOOP image -->
  8.         <li >PHOTO</li>
  9.         <!—END-LOOP image -->
  10.       </ul>
  11.     </div>
  12.   </div>
  13. </div>


 
Est-ce que je m’y prends de la bonne façon ? sinon, quel serait la meilleur façon ?
 
Merci d’avance


Message édité par deuxk le 14-11-2013 à 15:08:32
Reply

Marsh Posté le 13-11-2013 à 22:31:27   

Reply

Marsh Posté le 14-11-2013 à 04:24:21    

Desole j'y connais quasi rien en JQuery. Mais c'etait juste pour te dire que tu ferais mieux de changer ta balise parce que c'est pas du Java du tout (au mieux du Javascript on va dire, mais ces deux languages n'ont environ rien a voir) et du coup tu perds des gens qui pourraient peut-etre t'aider mais ne lisent pas le message parce qu'ils croient que tu as un probleme Java.

 

Edit: mets cette balise la: [HTML/CSS/Javascript]


Message édité par lasnoufle le 14-11-2013 à 04:25:32

---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 14-11-2013 à 13:52:18    

Effectivement j'y connais rien en Java mais heureusement le titre m'a fait penser à un pb Javascript, le mieux serait aussi que tu nous copie le message d'erreur dans la console de ton navigateur, si tu utilises FireFox, prend le plugin Firebug qui t'aideras bien.

Reply

Marsh Posté le 14-11-2013 à 14:55:22    

Malheureusement, je n'ai aucun message d'erreur dans ma console; le mieux que je peux faire c'est essayer de vous expliquez du mieux que je peux ce qui ce passe.  
 
Premierement, j'appuie sur la fleche de droite, tout procèdes comme il ce doit, les images bouge et tout est OK, j'appuie une deuxieme fois tout est OK, ainsi de suite.
Je reviens vers la gauche, ca va, apres 2-3 fois, mon curseur devient le cursur de ''loading'' et ca n'arrrête pas.
Apres quelque instant j'ai une message d'erreur qui me demande si je veux continuer a executer le script ou stopper le script!
Pour le message exacte, je vous reviens dans quelque minutes avec ca, je vais aller planter tout ca ;)
 
merci

Reply

Marsh Posté le 14-11-2013 à 15:09:27    

Je ne reussi pas a avoir le messsage d'erreur que je parlais plus haut, la il plante completement mon navigateur et je dois restaurer la session..

Reply

Marsh Posté le 14-11-2013 à 17:35:54    

Bon comme je disais, j'y connais rien, mais ton code a l'air bizarre: ta fonction pour le scroll right n'est pas "symetrique" a celle pour le scroll gauche. Deja le stop() a des parametres dans l'un et pas dans l'autre (aucune idee de si ca joue) mais surtout tu bases ton scroll droit sur le gauche en inversant un truc (si j'ai bien compris).
D'ou des trucs "de base":
- est-ce que ton scroll gauche marche a l'infini?
- est-ce que que gauche-gauche-droite-gauche a l'infini plante?
- t'es sur de la maniere dont tu geres pos et config.scrollWidth dans celui de droite? As-tu essaye de mettre des alertes pour voir la tete de ce que tu passes comme parametre a animate? A coupler avec la doc de animate et les valeurs attendues je suppose.
- si la gauche marche a l'infini, est-til possible de symetriser "completement" la droite? (i.e. utiliser scrollRight si ca existe, etc)

 

Edit: bon OK visiblement ScrollRight n'existe pas, c'est quoi ce truc de winner encore...
D'autres pistes vite fait:
- qu'est ce qui se passe quand tu atteinds ta derniere image et tente de continuer, t'es sur que c'est pas ca qui cause le plantage?
- t'as bien verifie que $(config.photoSlider) te renvoies bien un seul objet?
- t'as essaye sans .stop() nulle part histoire de voir si ca plante pareil ou pas?


Message édité par lasnoufle le 14-11-2013 à 17:59:42

---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 14-11-2013 à 19:45:22    

- qu'est ce qui se passe quand tu atteinds ta derniere image et tente de continuer, t'es sur que c'est pas ca qui cause le plantage?  
oui, sûre et certain!
 
- t'as bien verifie que $(config.photoSlider) te renvoies bien un seul objet?  
J'ai vérifier, mais je crois que non!
 
- t'as essaye sans .stop() nulle part histoire de voir si ca plante pareil ou pas?
Oui, j'ai essayer, aucun changement!
Aussi j'ai essayer les 2 avec .stop(true,true) et seulement stop()
 
- est-ce que ton scroll gauche marche a l'infini?
Il peu descendre dans le négatif, mais je ne crois pas que cela cause le problème!  
 
- t'es sur de la maniere dont tu geres pos et config.scrollWidth dans celui de droite? As-tu essaye de mettre des alertes pour voir la tete de ce que tu passes comme parametre a animate? A coupler avec la doc de animate et les valeurs attendues je suppose.
Oui, et pos augment et diminue comme il ce doit, mais apres quelque clique (gauche ou droite) ma souris ce mes a 'loader' et il me demande si je veux arrêter le script.
 
J'ai essaye des 100taines de chose, je suis au bout de mes connaissances. Malheureusement, je crois que c'est une trouble de Loop, mais je ne vois rien qui causerais cela.  
 
Si tu as une idée, c'est bienvenue ;)
 
merci encore!
 
 

Reply

Marsh Posté le 14-11-2013 à 22:12:10    

Nan desole comme je disais je connais ni JQuery ni Javascript en general, stait juste quelques idees comme ca mais je peux pas t'aider. A+


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 15-11-2013 à 17:53:18    

Si ton navigateur ne répond plus alors oui c'est surement causé par une boucle infinie, probablement causé par les valeurs de tes positions je dirai car autrement ça serait la bibliothèque qui bug. :/

Reply

Marsh Posté le 15-11-2013 à 17:55:11    

et bien, même si j'enleves tout que je fais juste un console.log('...'); il va me faire la même chose.
Et j'ai essaye plusieurs version du Jquery...
 
au secour ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed