Jquery > Problème de loop ou calcul trop lourd

Signaler
Messages postés
1
Date d'inscription
jeudi 14 novembre 2013
Statut
Membre
Dernière intervention
14 novembre 2013
-
cs_AlexN
Messages postés
694
Date d'inscription
lundi 5 décembre 2005
Statut
Membre
Dernière intervention
8 janvier 2014
-
Bonjour,

J'essaie de crée une function en jquery. Cette fonction servirais a faire défilé des photos de droite a gauche (avec overflow hidden).

Mon problème est le suivant :

- Les touches gauches/droites fonctionnes, mais après quelque clique vers la droite/gauche mon curseur ce transforme en curseur de ''loading'' et le navigateur ferme.

- Je n'ai aucun message d'erreur dans la console.

- Cela marchais bien avant que j'essaie de transformer mon code en function.

Voici la parti Jquery :
(function( $ ){
 
 
    /* AUTRE FUNCTION ... ****/
 
    /* Déroulement Photo ****/
    $.fn.photoScroll = function(options) {
 
var config = { leftArrow    : '#leftArrow',
           rightArrow   : '#rightArrow',
           photoSlider  : '#photoSlider',
               photoUL  : '#photoUL',
           scrollWidth  : 150,
           scrollSpeed  : 300 }
         
             
 
if (options){ $.extend(config, options); }
 
$(config.leftArrow).on({'click': function() {
 
    var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
                     $(config.photoSlider).stop(true,true).animate({scrollLeft:( pos - config.scrollWidth)+'px'}, config.scrollSpeed);
     }
 
});
 
$(config.rightArrow).on({'click': function() {
 
    var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
                                 
                 
$(config.photoSlider).stop().animate({scrollLeft: (pos+config.scrollWidth)+'px'}, config.scrollSpeed);
                         
                     }
         
});
}
})( jQuery ); 


Voici la parti html :
<div id="photoToScroll" style="width:100%;">
  <div id="leftArrow"> </div>
  <div id="rightArrow" style="  margin-right:0px;"> </div>
  <div id="center">
    <div id= « photoSlider" >
      <ul class="photoUL" id="photoUL">
        <!--BEGIN-LOOP image -->
        <li >PHOTO</li>
        <!--END-LOOP image -->
      </ul>
    </div>
  </div>
</div>


Le CSS n'est pas la, je vous l'épargne.
Si vous avez besoin de quoi que ce sois de plus, faites moi signe!

Je vous remercie d'avance!
Deuxk

1 réponse

Messages postés
694
Date d'inscription
lundi 5 décembre 2005
Statut
Membre
Dernière intervention
8 janvier 2014
7
Bonjour,

Ce que vous cherchez à faire ressemble à des carrousels des photos.
Pourquoi ne pas utiliser un module déjà fabriqué, comme :
- http://sorgalla.com/jcarousel/
- http://caroufredsel.dev7studios.com/
- http://wowslider.com/fr/jquery-slider-carousel-mac-stack-demo.html
- http://www.megaptery.com/2013/07/owlcarousel-carousel-jquery-responsive-multi-fonctions.html

ou celui des jQeuryTools : http://jquerytools.org/demos/scrollable/index.html

--