Dadou Posté 6 Octobre 2009 Posté 6 Octobre 2009 Bonjour a tous J'ai réalisé un double slideshow sous jquery, il fonctionne niquel sous Firefox, Chrome et Safari, mais comme d'hab, IE fait son petit malin. <script type="text/javascript"> var curritem = 0; var speed = 10000 $(document).ready(function() { NbElement = $(".slider li").length; $(".slider") .wrap('<div class="slider-conteneur"></div>') .css("width", (721 * NbElement) ); $(".min-slider") .wrap('<div class="min-slider-conteneur"></div>'); $(".slider-conteneur") .width( 579 ) .height( 402 ) .css("overflow", "hidden") .css("margin-right", "2px"); $(".slider-conteneur li") .css( "float", "left" ); $(".slider-conteneur li a img") .css( "border", "none" ); $(".min-slider-conteneur") .width(140) .height(402) .css( "float", "right" ) .css("overflow", "hidden"); $(".min-slider-conteneur li") .css( "float", "left" ) .css( "margin-bottom", "-1px" ); $(".min-slider-conteneur li img[slide]").click(function(){ curritem = $(this).attr("slide"); next(); clearInterval(timer); timer = setInterval(next,speed); }); var timer = setInterval(next,speed); function next() { curritem++; if(curritem == NbElement ) { curritem = 0; $(".slider").css("margin-left", "0px"); $(".min-slider").css("margin-top", "0px"); } $(".slider").animate({ marginLeft : - (579 * (curritem)) }); $(".min-slider").animate({ marginTop : - (101 * (curritem)) }); }});</script><div id="slideshow" style="width:723px;height:402;overflow:hidden;"> <ul class="min-slider"> <li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="1" /></li> <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="2" /></li> <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="3" /></li> <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="4" /></li> <li><img src="images/carousel/thumbs/img5.jpg" width="140" height="99" alt="" slide="5" /></li> <li><img src="images/carousel/thumbs/img6.jpg" width="140" height="99" alt="" slide="6" /></li> <li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="1" /></li> <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="2" /></li> <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="3" /></li> <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="4" /></li> </ul> <ul class="slider"> <li><a href="en/offer/technology-ip"><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></a></li> <li><a href="en/offer/pmatrix"><img src="images/carousel/img2.jpg" width="579" height="402" alt="" /></a></li> <li><a href="en/offer/touchpark"><img src="images/carousel/3.jpg" width="579" height="402" alt="" /></a></li> <li><a href="en/offer/professional-services"><img src="images/carousel/img4.jpg" width="579" height="402" alt="" /></a></li> <li><a href="en/offer/technology-ip"><img src="images/carousel/img5.jpg" width="579" height="402" alt="" /></a></li> <li><a href="en/offer/technology-ip"><img src="images/carousel/img6.jpg" width="579" height="402" alt="" /></a></li> <li><a href="en/offer/technology-ip"><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></a></li> </ul> Le grand glissant vers la gauche fonctionne parfaitement, le petit avec 4 vignettes et glissant vers le haut, ne remonte qu'une fois, j'en ai un peu ras le de ce navigateur de . Quelqu'un aurait une idée de ce qui vient le perturber dans son fonctionnement?
captain_torche Posté 6 Octobre 2009 Posté 6 Octobre 2009 Je viens de regarder sans les images, effectivement ça bloque C'est le animate du .min-slider qui semble poser problème, je regarde ça.
Dadou Posté 6 Octobre 2009 Auteur Posté 6 Octobre 2009 Oui, c'est effectivement le .min-slider qui bloque mais alors pourquoi et pourquoi uniquement sous IE, le vilain pas beau
captain_torche Posté 6 Octobre 2009 Posté 6 Octobre 2009 Avec le debugger sous IE, je vois pourtant bien les propriétés CSS modifiées. C'est vraiment bizarre.
Dadou Posté 6 Octobre 2009 Auteur Posté 6 Octobre 2009 Je ne suis pas fou alors. Surtout que j'ai appliqué strictement le même type d'effets que pour le slide horizontal, ça marche dans un cas et pas dans l'autre.
captain_torche Posté 6 Octobre 2009 Posté 6 Octobre 2009 Je regarderai dans la journée s'il y a une autre déclaration qui bloque la marge sous IE, mais c'est vrai que c'est bizarre. Sinon, il existe des plugins tout prêts pour faire du slideshow avec jquery, si jamais tu veux reprendre le code
Dadou Posté 6 Octobre 2009 Auteur Posté 6 Octobre 2009 Ok merci, je vais jeter un oeil sur le code du plugin et voir si j'y trouve des trucs intéressants
Dadou Posté 6 Octobre 2009 Auteur Posté 6 Octobre 2009 Bon, et bien j'ai trituré cela un peu dans tous les sens, et maintenant ça marche, pourquoi je sais pas voila le JS <script type="text/javascript"> var curritem = 0; var speed = 8000; $(document).ready(function() { NbElement = $(".slider li").length; $(".slider") .wrap('<div class="slider-conteneur"></div>') .css("width", (721 * NbElement) ); $(".min-slider") .wrap('<div class="min-slider-conteneur"></div>'); $(".slider-conteneur") .width( 579 ) .height( 402 ) .css("overflow", "hidden") .css("margin-right", "2px"); $(".slider-conteneur li") .css( "float", "left" ); $(".slider-conteneur li a img") .css( "border", "none" ); $(".min-slider-conteneur") .width(140) .height(402) .css( "float", "right" ) .css("overflow", "hidden"); $(".min-slider-conteneur li") .css( "float", "left" ) .css( "margin-bottom", "-1px" ); $(".min-slider-conteneur li img[slide]").click(function(){ curritem = $(this).attr("slide")-2; next(); clearInterval(timer); timer = setInterval(next,speed); }); var timer = setInterval(next,speed); function next() { curritem++; if(curritem == NbElement ) { curritem = 0; $(".slider").css("margin-left", "0px"); $(".min-slider").css("margin-top", "0px"); } $(".slider").animate({ marginLeft : - (579 * (curritem)) }); $(".min-slider").animate({ marginTop : - (101 * (curritem)) }); }});</script><div id="slideshow" style="width:721px;height:402px;overflow:hidden;"> <ul class="min-slider"><li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="2" /></li> <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="3" /></li> <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="4" /></li> <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="5" /></li> <li><img src="images/carousel/thumbs/img5.jpg" width="140" height="99" alt="" slide="1" /></li> <li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="2" /></li> <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="3" /></li> <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="4" /></li> <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="5" /></li> </ul> <ul class="slider"> <li><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></li> <li><img src="images/carousel/img2.jpg" width="579" height="402" alt="" /></li> <li><img src="images/carousel/img3.jpg" width="579" height="402" alt="" /></li> <li><img src="images/carousel/img4.jpg" width="579" height="402" alt="" /></li> <li><img src="images/carousel/img5.jpg" width="579" height="402" alt="" /></li> <li><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></li> </ul> </div> </div>
captain_torche Posté 7 Octobre 2009 Posté 7 Octobre 2009 L'essentiel, c'est que ça marche Tu as pu te pencher un peu sur le plugin?
paolodelmare Posté 7 Octobre 2009 Posté 7 Octobre 2009 J'ai déjà eu des bugs inexplicables avec jq/Ie. J'ai réussi a résoudre quelques soucis avec les options suivantes : -placer un bon doctype (que j'avais omis parce que je faisais juste un essai) -placer le code js en fin de page -vérifier que ma version de js était la dernière à jour -valider le html -triturer le code dans tout les sens sans de démarche très logique et parfois passer à un plugin tout fait (celui de captain_torche) notamment.
Dadou Posté 7 Octobre 2009 Auteur Posté 7 Octobre 2009 Tu as pu te pencher un peu sur le plugin? Oui je me suis penché dessus, je vais certainement m'en inspirer pour adapter mon code en plugin, et facilité l'implémentation d'options. et parfois passer à un plugin tout fait (celui de captain_torche) notamment. Il y a juste un défaut avec les plugins tout fait en général, c'est la tendance à l'obésité, car ils doivent penser à tous les cas.
paolodelmare Posté 7 Octobre 2009 Posté 7 Octobre 2009 Il y a juste un défaut avec les plugins tout fait en général, c'est la tendance à l'obésité, car ils doivent penser à tous les cas. C'est vrai que c'est souvent leur inconvénient.
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant