[Résolu] Slider souple sur le format des images

bonjour,

je recherche un slider Javascript qui permet de faire défiler des images qui n'ont pas le même ratio...
par exemple une image 800x600 suivi par une autre de 400x750, suivi par une autre de 500x500 et ainsi de suite et bien sur le tout centré et sans déformation de l'image...

vous connaissez ça?

sinon, un code de base de départ que je pourrais customiser?

merci d'avance
Modifié par lionel_css3 (10 Mar 2013 - 22:54)

Bonjour,

Regarde à cette adresse ! Tu pourrais y trouver ton bonheur .

lddsoft a écrit :
Bonjour,

Regarde à cette adresse ! Tu pourrais y trouver ton bonheur .

hé bien ça a l'air pas mal du tout ça !!

je te remercie vraiment.......

alors j'ai fait un essai vite fait avec sudo slider (lien de lddsoft), et ça correspond à ce que je cherche, par contre avec Chrome le résultat est tout pourri lors des transitions sur la taille des images, voir un exemple sur ce lien.

Lorsque les images se réduisent lors des transitions, j'ai des fines bandes verticales d'un ou deux pixels de large qui restent à l'écran (avec Chrome) , ça vous le fait aussi?

avec Firefox et IE, c'est nikel pourtant


edit: je rajoute une image pour montrer le problème




edit (10/03/2013 10:36) correction du lien qui était faux
Modifié par lionel_css3 (10 Mar 2013 - 10:35)

au cas où, voici le code javascript utilisé (venant de la page de sudo slider).
c'est le #slider qui contient l'image

    $(document).ready(function(){	
        var oldt = 0;
        var sudoSlider = $("#slider").sudoSlider({
            beforeAniFunc: function(t){
                var width = $(this).width();
                var diff = Math.sqrt(Math.abs(oldt-t));
                var speed = parseInt(diff*800);
                $('.nextBtn').animate(
                   { left: width-((width-900)/2) },
                   {
                      queue:false,
                      duration:speed
                   }
                );
                $('.prevBtn').animate(
                   { left: -((width-900)/2)-31 },
                   {
                      queue:false,
                      duration:speed
                   }
                );

                oldt = t;	
				

               $('#slider').animate(
                   { marginLeft: -((width-900)/2) },
                   {
                      queue:false,
                      duration:speed
                   }
                );
				
				
             },
			 auto: true,
			 continuous: true
			 
        });
		
		
		 $.vegas({
			src:'/images/big-bckgnd.jpg'
			});
		$.vegas('overlay', {
			src:'/images/overlays/06.png'
			});
    });	

et le html

<div id="slider">
<ul>				
<li><img src="images/slider-0/01.jpg" width="900" alt="image description"/></li>
<li style="width:505px;"><img src="images/slider-0/02.jpg" width="505" alt="image description"/></li>
<li style="width:762px;"><img src="images/slider-0/03.jpg" width="762" alt="image description"/></li>
<li><img src="images/slider-0/04.jpg" width="900" alt="image description"/></li>
<li style="width:467px;"><img src="images/slider-0/05.jpg" width="467" alt="image description"/></li>			
<li><img src="images/slider-0/06.jpg" width="900" alt="image description"/></li>			
<li><img src="images/slider-0/07.jpg" width="900" alt="image description"/></li>			
</ul>
</div>

Bizarre !
Sous Google Chrome (Version 25.0.1364.160 m) et Windows 7 (64-bit), je ne remarque aucune déformation de ce genre lorsque je regarde les exemples donnés sur le site sludo slider.

moi je suis dans le même contexte et ça le fait sur 2 machines windows 7 ,32 et 64 bit

As-tu les mêmes déformations lorsque tu vas regarder les exemples donnés sur le site sludo slider?
Ou alors, une explication possible, qui vaut ce qu'elle vaut : c'est parce que tu changes de format d'image lors de l'overlay ( de jpg => png ).
Ou alors, une autre explication : tu as modifié quelque chose dans le code js ou le CSS ...

N.B.: Le lien (vers l'exemple) que tu donnes ne fonctionne pas!
Modifié par lddsoft (10 Mar 2013 - 10:08)

lddsoft a écrit :


N.B.: Le lien (vers l'exemple) que tu donnes ne fonctionne pas!

ah oui, là je suis le roi des c.... javais mis le lien en local, voici le live

ici le lien correct

j'édite aussi le lien original dans la réponse plus haut.

donc en fait tu n'avais pas pu voir si ça fonctionnait bien avec chrome

en fait ce qui m'arrangerait, c'est que la transition des images se fasse sans animation avec un crossfade mais je ne trouve pas comment désactiver l'animation dans ce slider..

merci à toi
Modifié par lionel_css3 (10 Mar 2013 - 10:39)

Effectivement, il y a parfois des lignes verticales sous Google Chrome .

lionel_css3 a écrit :
En fait ce qui m'arrangerait, c'est que la transition des images se fasse sans animation avec un crossfade mais je ne trouve pas comment désactiver l'animation dans ce slider..

Pourquoi ne pas essayer de remplacer:

 auto: [b]true[/b],
 fade: [b]false[/b],
 crossFade: false,
 continuous: true

par:

 auto: [b]false[/b],
 fade: [b]true[/b],
 crossFade: false,
 continuous: true

J'ai pas essayé ...
Modifié par lddsoft (10 Mar 2013 - 15:10)

merci ldd, donc me problème est bien lié à Chrome.. pourtant j'avais cru que c'était Chrome le meilleur navigateur et celui qui interprétait le mieux le Javascript..

pour ton astuce, j'ai essayé et ça n'affiche pas le défaut sous Chrome mais il faut que le diaporama soit automatique quand même

Je crois avoir trouvé une solution:

dans "sudo.css", #container ==> modifier "text-align:left;" en "text-align:center;"

dans "jquery.sudoSlider.js", modifier "responsive: FALSE/* option[42]/*responsive*/"
en "responsive: TRUE /* option[42]/*responsive*/"

dans "basic.html", tu remets "auto: true,"

Seul hic, les boutons NEXT et PREV restent immobiles.

ah, intéressant....

ça ne fait plus le défaut sous chrome, mais les images ne sont plus centrées elles sont calées à gauche..... bizarre..

(edit): peut être pas, j'ai du avoir un problème de rafraichissement, on dirait que ça marche.... en fait , ton astuce
Modifié par lionel_css3 (10 Mar 2013 - 18:41)

donc finalement ton astuce est bonne, lddsoft, je te dois une fière chandelle...

en fait le responsive : true, on peut le passer en paramètre, ça évite de toucher la librairie.

et j'ai vu un truc bizarre, si on utilise les boutons prev et next, ça arrête la transition auto

edit: j'ai mis en ligne une version corrigée qui ne fait plus le défaut
Modifié par lionel_css3 (10 Mar 2013 - 19:02)

Wouah ! Super, non???!!
Je suis allé voir ce que ça donne sur le lien que tu m'as donné! C'est nickel, non ?!
Tu peux aussi déterminer la durée d'affichage de l'image ...
Un petit "Résolu" peut-être?
Modifié par lddsoft (10 Mar 2013 - 20:51)

lddsoft a écrit :

Un petit (Résolu) peut-être?

ben si quelqu'un connait le slider et sait pourquoi l'enchainement s'arrête dès qu'on a appuyé sur un des deux boutons, je suis preneur... lol
Modifié par lionel_css3 (10 Mar 2013 - 20:55)

Lorsqu'on appuie sur un bouton, on quitte le mode 'auto'

et c'est pas un peu dommage ça ???

Dommage, oui, peut-être! Normal, certainement

lddsoft a écrit :
Dommage, oui, peut-être! Normal, certainement

non, c'est pas normal... vas sur ce site http://www.rocksane.com/ , tu peux utiliser les boutons suivant et précédent, ça n'arrête pas le slider, il reprend tout seul sa progression
Modifié par lionel_css3 (10 Mar 2013 - 22:53)