Animation d'un carrousel [Résolu]

[theo01750]

Bonjour,

je suis tout nouveau dans l'utilisation de javascript. J'ai trouvé un bout de code pas mal que j'ai reussi a modifier. et la depuis une semaine je seche...
Actuellement les photos sont cote a cote et on ne voit qu'une partie de l'image et onmousever elle bouge on les voient en totalité. Mais j'aimerais qu'on voit la totalité de l'image1
j'essaye deseperement de faire en sorte que mon visuel1 s'affiche en premier et que les evenements de souris fasse le reste apres et bing impossible pouvez vous m'aider.
vous pouvez voir l'animation http://www.jechercheuneimprimerie.com

merci d'avance
voici le code :

Code :

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
jQuery(function () {
	//Hides the Slide Images and Panel Texts for Preloading
	jQuery('.slideimage').hide('background', '#000')();
 
	jQuery('.slide-minicaption').hide();
	jQuery('.slide-minicaptiontitle').hide();
	jQuery('.slidecaption').hide();
	jQuery('.slidecaptiontitle').hide();
 
	var slidenos = jQuery('.slideimage').length;
 
});
 
var i;
 
jQuery(window).bind("load", function() {
 
	//Preload
 
	var slidenos = jQuery('.slideimage').length;
 
		jQuery('.slideimage:hidden').fadeIn(800);
 
 
 
		jQuery(".kwicks.horizontal li").css('background', '#000');
 
 
		jQuery('.slide-minicaption').hide();
		jQuery('.slide-minicaptiontitle').hide();
		jQuery('.slidecaption').hide();
		jQuery('.slidecaptiontitle').hide();
 
		jQuery('.kwicks').kwicks({
			max : 850,
			spacing : 0
		});
 
 
 
});
 
jQuery(function(){
 
	//Hide all Captions and Mini Captions
	jQuery(".slidecaption").fadeTo(1, 0);
	jQuery(".slide-minicaption").fadeTo(1, 0.8);
 
 
	//On hover of a Kwick Panel
	//The Following Block is repeated for every Kwick Panel added
	//Basically It Hide the mini captions - Shows the hovered Panel with Full Caption and Fades the rest.
	//On Mouse Out it resets things back with mini captions
	//If you Add another Panel Simply Duplicate this block with additional kwickblock#
	jQuery('#kwickblock1').hover(function() {
		jQuery(".slide-minicaption").stop().fadeTo("fast", 0);	// Hide Mini Caption
		jQuery('#kwickblock1 .slidecaption').stop().fadeTo("slow", 0.8);	// Show Fullcaption
		jQuery("#kwickblock1 .slideimage").stop().fadeTo("slow", 1);	// Show Image in without transparency
		jQuery("#kwickblock2 .slideimage,#kwickblock3 .slideimage,#kwickblock4 .slideimage,#kwickblock5 .slideimage,#kwickblock6 .slideimage").stop().fadeTo("slow", 0.3);	// Fade the rest of the kwich panels
	},function(){
		jQuery('.slidecaption').stop().fadeTo("slow", 0);	// Hide fullcaption on mouse out
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0.8);	// Show minicaption
		jQuery(".slideimage").stop().fadeTo("slow", 1);	// Show all kwicks wihout transparency again
	});	
	jQuery('#kwickblock2').hover(function() {
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0);
		jQuery('#kwickblock2 .slidecaption').stop().fadeTo("slow", 0.8);
		jQuery("#kwickblock2 .slideimage").stop().fadeTo("slow", 1);
		jQuery("#kwickblock1 .slideimage,#kwickblock3 .slideimage,#kwickblock4 .slideimage,#kwickblock5 .slideimage,#kwickblock6 .slideimage").stop().fadeTo("slow", 0.3);
	},function(){
		jQuery('.slidecaption').stop().fadeTo("slow", 0);
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0.8);
		jQuery(".slideimage").stop().fadeTo("slow", 1);	
	});
 
	jQuery('#kwickblock3').hover(function() {
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0);
		jQuery('#kwickblock3 .slidecaption').stop().fadeTo("slow", 0.8);
		jQuery("#kwickblock3 .slideimage").stop().fadeTo("slow", 1);
		jQuery("#kwickblock1 .slideimage,#kwickblock2 .slideimage,#kwickblock4 .slideimage,#kwickblock5 .slideimage,#kwickblock6 .slideimage").stop().fadeTo("slow", 0.3);
	},function(){
		jQuery('.slidecaption').stop().fadeTo("slow", 0);
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0.8);
		jQuery(".slideimage").stop().fadeTo("slow", 1);	
	});
 
	jQuery('#kwickblock4').hover(function() {
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0);
		jQuery('#kwickblock4 .slidecaption').stop().fadeTo("slow", 0.8);
		jQuery("#kwickblock4 .slideimage").stop().fadeTo("slow", 1);
		jQuery("#kwickblock1 .slideimage,#kwickblock2 .slideimage,#kwickblock3 .slideimage,#kwickblock5 .slideimage,#kwickblock6 .slideimage").stop().fadeTo("slow", 0.3);
	},function(){
		jQuery('.slidecaption').stop().fadeTo("slow", 0);
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0.8);
		jQuery(".slideimage").stop().fadeTo("slow", 1);
	});
 
 
	jQuery('#kwickblock5').hover(function() {
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0);
		jQuery('#kwickblock5 .slidecaption').stop().fadeTo("slow", 0.8);
		jQuery("#kwickblock5 .slideimage").stop().fadeTo("slow", 1);
		jQuery("#kwickblock1 .slideimage,#kwickblock2 .slideimage,#kwickblock3 .slideimage,#kwickblock4 .slideimage,#kwickblock6 .slideimage").stop().fadeTo("slow", 0.3);
	},function(){
		jQuery('.slidecaption').stop().fadeTo("slow", 0);
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0.8);
		jQuery(".slideimage").stop().fadeTo("slow", 1);
			});
 
	jQuery('#kwickblock6').hover(function() {
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0);
		jQuery('#kwickblock6 .slidecaption').stop().fadeTo("slow", 0.8);
		jQuery("#kwickblock6 .slideimage").stop().fadeTo("slow", 1);
		jQuery("#kwickblock1 .slideimage,#kwickblock2 .slideimage,#kwickblock3 .slideimage,#kwickblock4 .slideimage,#kwickblock5 .slideimage").stop().fadeTo("slow", 0.3);
	},function(){
		jQuery('.slidecaption').stop().fadeTo("slow", 0);
		jQuery(".slide-minicaption").stop().fadeTo("slow", 0.8);
		jQuery(".slideimage").stop().fadeTo("slow", 1);
});
	});

[Sergejack]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
	à remplacer :
	//Hide all Captions and Mini Captions
	jQuery(".slidecaption").fadeTo(1, 0);
	jQuery(".slide-minicaption").fadeTo(1, 0.8);
 
	par :
 
jQuery(".slide-minicaption").stop().fadeTo("fast", 0);	// Hide Mini Caption
		jQuery('#kwickblock1 .slidecaption').stop().fadeTo("slow", 0.8);	// Show Fullcaption
		jQuery("#kwickblock1 .slideimage").stop().fadeTo("slow", 1);	// Show Image in without transparency
		jQuery("#kwickblock2 .slideimage,#kwickblock3 .slideimage,#kwickblock4 .slideimage,#kwickblock5 .slideimage,#kwickblock6 .slideimage").stop().fadeTo("slow", 0.3);	// Fade the rest of the kwich panels

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13

jQuery('#kwickblockxxx').hover(function() {
		code à garder
	},function(){
		code a remplacer par :

jQuery(".slide-minicaption").stop().fadeTo("fast", 0);	// Hide Mini Caption
		jQuery('#kwickblock1 .slidecaption').stop().fadeTo("slow", 0.8);	// Show Fullcaption
		jQuery("#kwickblock1 .slideimage").stop().fadeTo("slow", 1);	// Show Image in without transparency
		jQuery("#kwickblock2 .slideimage,#kwickblock3 .slideimage,#kwickblock4 .slideimage,#kwickblock5 .slideimage,#kwickblock6 .slideimage").stop().fadeTo("slow", 0.3);	// Fade the rest of the kwich panels
 
	});

[theo01750]

Merci beaucoup pour ta reponse j'ai essayé mais ca ne marche pas...il reste comme avant...j'ai peut etre fais une mauvaise manip....je ne sais pas....

[danielhagnoul]

Bonjour

Je ne connais pas "kwicks", mais un coup d'oeil sur la documentation montre qu'il existe un paramètre "sticky" qu'il suffirait de passer à "true" au lieu de "false" sa valeur par défaut.

Voir : http://www.jeremymartin.name/project...project=kwicks

[theo01750]

trop fort....ca marche ...j'y crois pas...merci merci merci du premier coup...j'en reviens pas....