Dadou Posté 6 Octobre 2009 Partager 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? Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 6 Octobre 2009 Partager Posté 6 Octobre 2009 Tu as une URL de test ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dadou Posté 6 Octobre 2009 Auteur Partager Posté 6 Octobre 2009 Pas sous la main tout de suite Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 6 Octobre 2009 Partager 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dadou Posté 6 Octobre 2009 Auteur Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 6 Octobre 2009 Partager Posté 6 Octobre 2009 Avec le debugger sous IE, je vois pourtant bien les propriétés CSS modifiées. C'est vraiment bizarre. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dadou Posté 6 Octobre 2009 Auteur Partager 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 6 Octobre 2009 Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dadou Posté 6 Octobre 2009 Auteur Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dadou Posté 6 Octobre 2009 Auteur Partager 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> Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 7 Octobre 2009 Partager Posté 7 Octobre 2009 L'essentiel, c'est que ça marche Tu as pu te pencher un peu sur le plugin? Lien vers le commentaire Partager sur d’autres sites More sharing options...
paolodelmare Posté 7 Octobre 2009 Partager 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dadou Posté 7 Octobre 2009 Auteur Partager 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
paolodelmare Posté 7 Octobre 2009 Partager 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant