Discussion :

[pierrot10]

Bonjour à tous,
Connaissez-vous jCarousel?
j'ai trouvé ceci qui est vraiment bien et facile a implémenter et paramettrer
http://sorgalla.com/projects/jcarousel/

Je bloque sur un truc, j'aimerais changer le mode de traisition netre les images. J'aimerais bien avoir le 'fade' ou 'fading'.

Si je l'ai bien compris il fait aujouté easing:
comme ceci:

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
 
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Configuration goes here
		scroll:1,
		auto:1,
		rtl:0,
		animation:500,
		wrap:"last",
		scroll:1,
		easing:'fade'
    });
});
</script>

Mais ca ne marche pas.
Si je vais voir cette page
http://sorgalla.com/projects/jcarous...al_easing.html
Il y a un effet de "boncing"...
Si en suite vous aller voir le code source de la meme page, on peut voir ce code et cette fonction "BounceEaseOut"

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
 
<script type="text/javascript">
 
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d) {
	if ((t/=d) < (1/2.75)) {
		return c*(7.5625*t*t) + b;
	} else if (t < (2/2.75)) {
		return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
	} else if (t < (2.5/2.75)) {
		return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
	} else {
		return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
	}
};
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        easing: 'BounceEaseOut',
        animation: 1000
    });
});
 
</script>

Comment pourrais adapter ceci pour avoir un effet de "fade" (faire donc en sorte que la premiere image s'"évanouit" dans la deuxième pour voir la deuxieme s'afficher à sa palce...

Voyez-vous?

Mille mercis pour votre aide

[danielhagnoul]

Bonsoir

fade n'est pas un effet du plugin jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
<script charset="utf-8" src="../lib/jquery-easing-1.3.js"></script>
<script charset="utf-8" src="jCarousel.js"></script>
<script>
	$(function(){
		$('#mycarousel').jcarousel({
			easing: 'easeOutBounce',
			animation: 1000
		});
	});
</script>