Discussion :

[cyberbelette]

Bonjour,
Suite à la discussion résolue ci-dessous:
http://www.developpez.net/forums/d13...t/#post7556194
J'aurais encore bien besoin de vos lumières.
Je sais maintenant comment faire scroller horizontalement avec un bouton (#innerD) un bandeau (#div1) d'images de largeurs différentes de la valeur de la window.innerWidth, mais un détail me gêne: après le scroll, on se retrouve avec des images tronquées en bordures gauche et droite de fenêtre.
J'essaye donc d'ajouter à mon bouton de scroll une fonction qui demande, lorsqu'une image est visible dans la fenêtre ET que son extrémité gauche est cachée en x négatif, de la recaler en x=0.
Le résultat souhaité est donc, à chaque scroll, que la première image visible à gauche soit entièrement visible.
J'ai regardé les spécification jquery sur :
http://api.jquery.com/scrollLeft et http://api.jquery.com/visible-selector
Mais il doit tout de même y avoir un pb de syntaxe dans ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function (){
            $("#innerD").click(function (){
                    $('html, body').animate({
                        scrollLeft: '+='+window.innerWidth // va à droite de la valeur du viewport//
                    }, 1000);
			if($("#div1 img:visible") && $("#div1 img").scrollLeft()<0){ // censé caler le bord gauche de l'image de gauche contre la gauche du viewport si elle est coupée
				$("#div1 img").scrollLeft(0)
			}
					return false;
            });
        });

Parce que ça ne marche pas : ça scroll de la largeur de la fenêtre, mais l'image de gauche ne se cale pas comme il faut.
Encore un guillemet mal placé, ou bien ?…

[cyberbelette]

Un petit coup de main SVP ?
Ne serait-ce que pour me dire s'il y a une erreur de syntaxe dans cette partie de fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if($("#div1 img:visible") && $("#div1 img").scrollLeft()<0){ // censé caler le bord gauche de l'image de gauche contre la gauche du viewport si elle est coupée
				$("#div1 img").scrollLeft(0)
			}

Avec mes remerciements anticipés…

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $("#div1 img").scrollLeft()<0

un scroll négatif ?

[cyberbelette]

Non, c'est la position de l'image (après un scroll du div vers la droite) dont le bord gauche est en négatif: si une image est (partiellement) visible dans le viewport et avec sa partie gauche en négatif = non visible dans le viewport… Alors: la caler en position x0.
Ça me paraissait logique, mais un truc doit m'échapper.
Ou peut-être y a-t-il une erreur dans la façon de lier cette instruction conditonnelle au reste de la fonction?

[SpaceFrog]

tu ne confonds pas avec offset().left ?

[cyberbelette]

offset().left c'est le point le plus à gauche du document, mais là il s'agit du point le plus à gauche visible dans le viewport; l'offset().left a déja filé à gauche en négatif pour faire apparaitre la suite des images qui sont à droite.
Le but c'est de slider horizontalement au click des images de largeurs différentes et quelle que soit la largeur de la fenêtre du navigateur: ça c'est fait, mais j'essaye de faire en sorte qu'à chaque fois qu'on clicke/scrolle: la première image visible à gauche soit entière.

[SpaceFrog]

tu cherche à recupérer la position d'une image ...

$("#div1 img").offset().leftte retournera sa position par rapport au conteneur ...

ensuite tu applique une position du scroll sur le conteneur avec scrollLeft() ...

[cyberbelette]

Ça devient un poil trop complexe pour moi, ce serait un truc du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var imgGauche = $("#div1 img:visible") && $("#div1 img").scrollLeft()<0;
var Pos = $(imgGauche).offset().left;
	{$(Pos).scrollLeft(0);}

"Du genre" seulement, parce que rien ne change…

[SpaceFrog]

Si je comprends bein tu cherches à caler une image ...


teste sa position avec offset().left() compare cette position avec celle que ton image devrait avoir pour être alignée comme il faut.
attribue au conteneur le scroll qu'il faut pour l'aligner ... avec le scrollLeft

[cyberbelette]

J'ai essayé de suivre ta suggestion dans mon message précédent, mais mes connaissances en js sont manifestement insuffisantes, et c'est un peu compliqué car il peut s'agir de n'importe quelle image (de largeur variable) se retrouvant première à gauche dans la fenêtre (de largeur variable) après le scroll.
Il y a donc 2 actions: 1 scroll de la largeur de la fenêtre, puis une correction du scroll pour que la 1ère image visible à gauche soit calée à gauche (je ne sais même pas si le résultat sera fluide, l'idéal serait de n'avoir qu'une seule action).
En fait je devrais plutôt définir un scroll de la dernière image de droite à condition qu'elle soit partiellement visible, pour la caler à gauche (sa partie gauche sur la partie gauche de la fenêtre), et sinon scroller la première image cachée hors de la fenêtre à droite, pour qu'elle soit calée à gauche.
J'ai trouvé une source pour la partie "calage", mais j'ai un peu de mal à la comprendre comment l'adapter à mon cas:
http://jqueryui.com/resources/demos/...n/default.html