Discussion :

[taka10]

Bonjour,

Voici un lien qui montre mon soucis : http://helios.s186997.alain_delcroix...-appartements/

Je voudrais que lorsqu'on scroll vers le haut ou le bas, on change de lot sur la roue, ça fonctionne sur safari mais pas sur les autres navigateurs, ça fonctionne mais c'est trop rapide.

Merci d'avance pour vos retours

[Invité]

Mode Maintenance

[taka10]

oups désolé c'est modifié

[taka10]

Je met icic le code JS que j'utilise :

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
 
$(document).ready(function(){
    $('section').bind('DOMMouseScroll mousewheel', function(e){
 
    	var val=$('#lot_ec').val();
    	var val_a=val;
 
        if(e.originalEvent.wheelDelta /120 > 0) {
            val=parseInt(val)-1;
            if(val==0)
            	val=1;
            $('#lot_ec').val(val);
        }
        else{
            val=parseInt(val)+1;
            if(val==19)
            	val=18;
            $('#lot_ec').val(val);
        }				
 
 
		//lot à mettre en arrière
		var id='rp'+val_a;				
 
		//on agrandit le rayon principal
		$("#"+id).removeClass('rayon_gros');
 
		$("#"+id).children('.rond').find('.lot').removeClass('app');
		$("#"+id).children('.rond').find('p').removeClass('app');
 
		//on agrandit les autres
		$('.r2-'+id).removeClass('rayon_r2');
		$('.r3-'+id).removeClass('rayon_r3');
		$('.r4-'+id).removeClass('rayon_r4');
		$('.r5-'+id).removeClass('rayon_r5');
		$('.r6-'+id).removeClass('rayon_r6');
		$('.r7-'+id).removeClass('rayon_r7');
		$('.r8-'+id).removeClass('rayon_r8');
 
		if(id=="rp1")
		{
			$('.r2-rp19').removeClass('rayon_r2');
			$('.r3-rp19').removeClass('rayon_r3');
			$('.r4-rp19').removeClass('rayon_r4');
			$('.r5-rp19').removeClass('rayon_r5');
			$('.r6-rp19').removeClass('rayon_r6');
			$('.r7-rp19').removeClass('rayon_r7');
			$('.r8-rp19').removeClass('rayon_r8');
		}
 
		//nouveau lot à mettre en avant
        var id='rp'+val;
 
		//on agrandit le rayon principal
		$("#"+id).addClass('rayon_gros');
 
		$("#"+id).children('.rond').find('.lot').addClass('app');
		$("#"+id).children('.rond').find('p').addClass('app');
 
		//on agrandit les autres
		$('.r2-'+id).addClass('rayon_r2');
		$('.r3-'+id).addClass('rayon_r3');
		$('.r4-'+id).addClass('rayon_r4');
		$('.r5-'+id).addClass('rayon_r5');
		$('.r6-'+id).addClass('rayon_r6');
		$('.r7-'+id).addClass('rayon_r7');
		$('.r8-'+id).addClass('rayon_r8');
 
		if(id=="rp1")
		{
			$('.r2-rp19').addClass('rayon_r2');
			$('.r3-rp19').addClass('rayon_r3');
			$('.r4-rp19').addClass('rayon_r4');
			$('.r5-rp19').addClass('rayon_r5');
			$('.r6-rp19').addClass('rayon_r6');
			$('.r7-rp19').addClass('rayon_r7');
			$('.r8-rp19').addClass('rayon_r8');
		}
 
		var n_slide=val;	
		slider.reloadSlider({
	        startSlide:parseInt(n_slide-1),	
		    controls: false,
		    pager: false,
		    infiniteLoop: false,
		    slideMargin: 0,
		    slideWidth: 600,
		    minSlides: 1,
		    maxSlides: 1,
		    moveSlides: 1,
		    mode: 'fade',
		    speed: 1000,
			touchEnabled: false,
		    auto: false	
	    });
    });
});

Sur safari, je n'ai aucun soucis, lorsque je scroll vers le haut ou vers le bas, on change de lot de 1 en 1. Sur chrome et Firefox, lorsque je scrolle vers le bas par exemple, je passe du lot 1 au lot 5 directement, c'est trop rapide en fait. Comment je peux gérer cela ?

[Invité]

Bonjour,

1- taka utiliser un .setTimeout(), non ?


2- DOMMouseScroll (compatibilité)

Deprecated
This feature is no longer recommended.[...]
Non-standard

3- mousewheel (compatibilité)

Deprecated
This feature is no longer recommended.[...]
Non-standard

Important: Instead of this obsolete event, use the standard wheel event.

4-

Code :

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

1
2
3
4
5
             if(val==0)
            	val=1;
...
            if(val==19)
            	val=18;

On peut aussi passer du 18 au 1, et vice-versa :

Code :

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

1
2
3
4
5
             if(val==0)
            	val=18;
...
            if(val==19)
            	val=1;

Ainsi, on peut faire plusieurs fois le tour de la roue, sans "bloquer" sur le 18 ou le 1.

On peut aussi utiliser l'ASTUCE du "modulo"/"reste" : %.

• x%18 : tous les multiples de 18 renvoient 0 (zéro)

[taka10]

Bonjour et Merci pour ton retour.

Pour le point 1, je ne pense pas que le set timeout soit approprié, voici ce que je souhaite reproduire comme effet : https://waaark.com/vision/ , je souhaite modifier le comportement du scroll.

OK pour le 2 et le 3 , mais quoi mettre à la place ?

Pour le point 4, bien vu... Merci