Discussion :

[darkterreur]

Bonsoir,

J'utilise un script Jquery de galerie d'image avec un défilement des images de gauche a droite ou de droite a gauche.

Dans l'animation un petit menu apparait comme pour un film ou je peux choisir la flèche de gauche pour avoir un défilement vers la gauche, ou l'inverse pour la flèche de droite.

Le problème est que ma page possède un peu de contenu et donc l'utilisateur doit scroller un peu pour arriver a la galerie. Cependant si je choisit l'une de mes deux options, gauche ou droite, ma page ne reste pas au même niveau, l'animation me fait remonter tout en haut de la page.

je vous coller ici le script JS, peut être auriez vous une idée pour empêcher ce désagrément.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
 
			$(function() {
 
			  //remove js-disabled class
				$("#viewer").removeClass("js-disabled");
 
			  //create new container for images
				$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
 
				//add images to container
				$(".wrapper").each(function() {
					$(this).appendTo("div#container");
				});
 
				//work out duration of anim based on number of images (1 second for each image)
				var duration = $(".wrapper").length * 1000;
 
				//store speed for later (distance / time)
				var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
 
				//set direction
				var direction = "rtl";
 
				//set initial position and class based on direction
				(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
 
				//animator function
				var animator = function(el, time, dir) {
 
					//which direction to scroll
					if(dir == "rtl") {
 
					  //add direction class
						el.removeClass("ltr").addClass("rtl");
 
						//animate the el
						el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
 
							//reset container position
							$(this).css({ left:$("div#imageScroller").width(), right:"" });
 
							//restart animation
							animator($(this), duration, "rtl");
 
							//hide controls if visible
							($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;			
 
						});
					} else {
 
					  //add direction class
						el.removeClass("rtl").addClass("ltr");
 
						//animate the el
						el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
 
							//reset container position
							$(this).css({ left:0 - $("div#container").width() });
 
							//restart animation
							animator($(this), duration, "ltr");
 
							//hide controls if visible
							($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;			
						});
					}
				}
 
				//start anim
				animator($("div#container"), duration, direction);
 
				//pause on mouseover
				$("a.wrapper").live("mouseover", function() {
 
					//stop anim
					$("div#container").stop(true);
 
					//show controls
					($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
					($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
					($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
 
					//variable to hold trigger element
					var title = $(this).attr("title");
 
					//add p if doesn't exist, update it if it does
					($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
				});
 
				//restart on mouseout
				$("a.wrapper").live("mouseout", function(e) {
 
					//hide controls if not hovering on them
					(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
 
					//work out total travel distance
					var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
 
					//work out distance left to travel
					var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
 
					//new duration is distance left / speed)
					var newDuration = distanceLeft / speed;
 
					//restart anim
					animator($("div#container"), newDuration, $("div#container").attr("class"));
 
				});
 
				//handler for ltr button
				$("#ltr").live("click", function() {
 
					//stop anim
					$("div#container").stop(true);
 
					//swap class names
					$("div#container").removeClass("rtl").addClass("ltr");
 
					//work out total travel distance
					var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
 
					//work out remaining distance
					var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
 
					//new duration is distance left / speed)
					var newDuration = distanceLeft / speed;
 
					//restart anim
					animator($("div#container"), newDuration, "ltr");
				});
 
				//handler for rtl button
				$("#rtl").live("click", function() {
 
					//stop anim
					$("div#container").stop(true);
 
					//swap class names
					$("div#container").removeClass("ltr").addClass("rtl");
 
					//work out total travel distance
					var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
 
					//work out remaining distance
					var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
 
					//new duration is distance left / speed)
					var newDuration = distanceLeft / speed;
 
					//restart anim
					animator($("div#container"), newDuration, "rtl");
				});
			});

Je vous remercie par avance.

[SpaceFrog]

juste par hasard, tes boutons de défilement ne seraient ils pas des balises a ?


Autre chose qui n'a rien a voir mais pour tes selecteurs:

Code :

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

div#imageScroller

il est inutile et gourmand en ressources de mettre div devant un selecteur id
en effet un id est unique sur la page. Mettre div devant oblige jquery à aller d'abord chercher les divs de la page avant d'en retirer l'id ...
('#imageSrcoller') tout court est suffisant car un id est unique sur la page.

[darkterreur]

Bonjour SpaceFrog,

alors pour le

DIV#

j'ai fait le nécessaire, le code devrais être plus léger, après je dois avouer je ne ressent pas la différence.

Pour ce qui est des balise "a", effectivement tu a raison, je suppose donc que c'est ce qui me cause mon problème.
L'idée serait donc de les remplacer par une autre balise, mais laquelle?
<span> ?

[NoSmoking]

Bonsoir,
event.preventDefault() pour annihiler l'événement par défaut des liens.