Image rotator jquery avec timer

**YaKoONeT** · 12/08/2009, 14h54

Bonjour à tous,

je viens de mettre en place ce slider : http://www.sohtanaka.com/web-design/...mage-rotator/# pour mon site web, celui-ci fonctionne très bien, comme vous pouvez le voir si vous cliquez sur le lien.

Voici le code js :

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
 
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
 
	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
 
	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active'); 
	$(".image_thumb ul li").click(function(){ 
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
 
		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser				
			$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		}
 
		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		return false;
 
	}) .hover(function(){
		$(this).addClass('hover');
		}, function() {
		$(this).removeClass('hover');
	});
 
 
});//Close Function
</script>

Je souhaiterai juste apporter une modification, à savoir, que les images se succèdent sans obligatoirement cliquer dessus, avec une sorte de timer.
Je suis debutant avec jquery, je sais que c'est possible mais je n'arrive pas à trouver de solution, même avec les scripts trouvés sur ce forum... quelqu'un peut-il m'aiguiller ? merci.

**danielhagnoul** · 13/08/2009, 02h29

Bonsoir..bonjour (2h20)

Si j'ai bien vu et compris il s'agit de simuler un click sur chaque $(".image_thumb ul li").

Je n'ai pas pu tester en situation puisque je n'ai pas la totalité du code, mais je vous propose de tester 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
 
        $(document).ready(function(){
            //http://james.padolsey.com/javascript/jquery-delay-plugin/
            $.fn.delay = function(time, callback){
                jQuery.fx.step.delay = function(){};
                return this.animate({delay:1}, time, callback);
            }    
 
            $(".image_thumb ul li").each(function(i,item){
                $(item).delay(2000*(i+1), function(){
                    $(item).click();
                });
            });
        });

J'utilise le plugin delay pour cliquer sur chaque li avec un délai ici de 2 s * (i+1). i étant le numéro d'ordre de l'item en cours de traitement, i va de 0 à n.

**YaKoONeT** · 13/08/2009, 12h52

Salut,

merci daniel pour ton aide, j'ai réussi à faire quelques chose grâce à ton code que j'ai un peu modifié, car une fois que les $(".image_thumb ul li") ont tous défilé, je souhaiterais que ça recommence (à l'infini). Et avec ton code je vois pas comment faire

Je veux que ce soit le cas également si l'on clique sur un $(".image_thumb ul li"), j'ai essayé ça.

Dans

Code :

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

$(".image_thumb ul li").click(function(){

après

Code :

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

$(this).addClass('active');

j'ai ajouté ceci :

Code :

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

1
2
3
4
5
6
7
8
9
$(this).delay(2000, function(){
	// On recupere la position de l'element courant
	$pos = $(".image_thumb ul li").index(this);
	// on simule un click sur l'element suivant
	if($pos == 3)	// lorsque l'on arrive au dernier element on remet le compteur a zero pour creer une boucle infinie
		$(".image_thumb ul li").eq(0).click();
	else
		$(".image_thumb ul li").eq($pos+1).click();
	});

Ce bout de code repère la position courante de l'élément cliqué et simule un clic sur l'élément suivant. Si l'on clique une fois, tout va bien, mais dès que l'on reclique, ça part dans tous sens, l'ordre n'est plus du tout respecté...

Auriez-vous une idée ? je sens que je suis pas loin mais je n'arrive pas à me fins... merci.

PS : j'ai mis mon code avec les images en pièce jointe.

**YaKoONeT** · 17/08/2009, 12h47

J'ai travaillé sur cette animation, j'ai réussi à faire une boucle correcte qui garde l'ordre des slides lorsque l'on clique sur un en particulier.

J'ai mis ceci :

Code :

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

1
2
3
4
5
6
currentPosition = $(".image_thumb ul li").index(this);
if(currentPosition == 3) 
	currentPosition = -1;
$(this).delay(2000, function(){
	$(".image_thumb ul li").eq(currentPosition+1).click();
});

A la place de :

Code :

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

1
2
3
4
5
6
7
8
9
$(this).delay(2000, function(){
	// On recupere la position de l'element courant
	$pos = $(".image_thumb ul li").index(this);
	// on simule un click sur l'element suivant
	if($pos == 3)	// lorsque l'on arrive au dernier element on remet le compteur a zero pour creer une boucle infinie
		$(".image_thumb ul li").eq(0).click();
	else
		$(".image_thumb ul li").eq($pos+1).click();
});

Par contre, une chose étrange survient : je clique une 1ere fois sur un slide, la boucle se met en place et la simulation de clic passe par chaque $(".image_thumb ul li") avec un délais de 2000 millisecondes (jusque là tout va bien). Si je clique sur un autre slide, le 3eme par exemple, le 4eme est correctement sélectionné mais avec un délais beaucoup plus court et ainsi de suite, si je re-reclique sur un autre slide le délais est de plus en plus court...?!? et l'animation défile à une allure trop importante !!

Savez-vous quel remède pourrais-je utiliser pour garder à chaque fois le même délais entre chaque animation ? Merci.

**bhinard** · 21/08/2009, 12h12

il y a cette solution qui fonctionne à peu près correctement. Le seul bémol, c'est qu'il n'y a pas de pause dans le timer lorsqu'on clique sur un des liens.

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
$(document).ready(function() {	
	$("#partenaire").innerfade({ speed: "slow", timeout: 4000, type: "sequence" }); 
		$(".main_image .desc").show(); //Show Banner
		$(".main_image .block").animate({ opacity: 0.65 }, 1 ); //Set Opacity$(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)//runs function on click
		$(".image_thumb ul li").click(function () {
		    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
			var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
			var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
			var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
 
			if ($(this).is(".active")) {  //If it's already active, then...
				return false; // Don't click through
			} else {
				//Animate the Teaser				
				$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
					$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
					$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
				});
			}
 
			$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
			$(this).addClass('active');  //add class of 'active' on this list only
			return false;$active = $(this);
		slideSwitchClick();
		})
		.hover(function(){ //Hover effects on list-item
		$(this).addClass('hover'); //Add class “hover” on hover
		}, function() {
		$(this).removeClass('hover'); //Remove class “hover” on hover out
		});
 
		//runs function, set timer here
		$(function() {
		setInterval('slideSwitchTimed()', 7000 );// temps du défilement en millisecondes
		});
 
		});
 
		function slideSwitchTimed() {
		$active = $('.image_thumb ul li.active').next();
		if ( $active.length == 0 ) $active = $('.image_thumb ul li:first'); //goes back to start when finishes
		slideSwitch();
		}
 
		function slideSwitchClick() {
			 slideSwitch();
		}
 
		function slideSwitch() {
		var $prev = $('.image_thumb ul li.active');
 
		//Show active list-item
		$prev.removeClass('active');
		$active.addClass('active');
 
		//Set Variables
		var imgAlt = $active.find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $active.find('a').attr("href"); //Get Main Image URL
		var imgDesc = $active.find('.block').html(); //Get HTML of the “block” container
		var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the “block”
 
		if ($(this).is(".active")) { //If the list item is active/selected, then…
		return false; // Don’t click through – Prevents repetitive animations on active/selected list-item
		} else { //If not active then…
		//Animate the Description
		$(".main_image img").animate({ opacity: 0}, 250 );
		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
		$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
		$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
		});
 
		}
		return false;
	}

**YaKoONeT** · 24/08/2009, 15h03

Super, merci bhinard !!!

cette solution me convient tout à fait, j'ai juste retiré cette ligne :

Code :

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

$("#partenaire").innerfade({ speed: "slow", timeout: 4000, type: "sequence" });

qui ne mettait pas utile.

Merci pour tout !!

**bhinard** · 25/08/2009, 14h58

Envoyé par YaKoONeT

cette solution me convient tout à fait, j'ai juste retiré cette ligne :

Code :

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

$("#partenaire").innerfade({ speed: "slow", timeout: 4000, type: "sequence" });

qui ne mettait pas utile.

Merci pour tout !!

normal, c'est un autre effet sur ma page

**bhinard** · 14/09/2009, 15h49

voici mon code avec un mode "pause" lorsqu'on clique sur un des items (en fait, il remet le timer à zéro)

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
$(document).ready(function() {	
		$(".main_image .desc").show(); //Show Banner
		$(".main_image .block").animate({ opacity: 0.65 }, 1 ); $(".image_thumb ul li:first").addClass('active'); //runs function on click
		$(".image_thumb ul li").click(function () {
		    var imgAlt = $(this).find('img').attr("alt"); 
			var imgTitle = $(this).find('a').attr("href"); 
			var imgDesc = $(this).find('.block').html(); 	
			var imgDescHeight = $(".main_image").find('.block').height();	
 
			if ($(this).is(".active")) {  
				return false;
			} else {
					$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
					$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
					$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
				});
			}
 
			$(".image_thumb ul li").removeClass('active'); 
			$(this).addClass('active');  
			return false;$active = $(this);
		slideSwitchClick();
		})
		.hover(function(){ 
 
		$(this).addClass('hover'); 
		clearInterval(playSlideshow);
		playSlideshow = setInterval('slideSwitchTimed()', 7000 );	
		}, function() {
		$(this).removeClass('hover'); 			
		});
 
		//runs function, set timer here
		$(function() {
			playSlideshow = setInterval('slideSwitchTimed()', 7000 );
		});		
		});
 
		function slideSwitchTimed() {
		$active = $('.image_thumb ul li.active').next();
		if ( $active.length == 0 ) $active = $('.image_thumb ul li:first'); 
		slideSwitch();
		}
 
		function slideSwitchClick() {
			slideSwitch();			
		}
 
		function slideSwitch() {
		var $prev = $('.image_thumb ul li.active');
 
		//Show active list-item
		$prev.removeClass('active');
		$active.addClass('active');
 
		//Set Variables
		var imgAlt = $active.find('img').attr("alt"); 
		var imgTitle = $active.find('a').attr("href"); 
		var imgDesc = $active.find('.block').html(); 
		var imgDescHeight = $(".main_image").find('.block').height(); 
 
		if ($(this).is(".active")) { 
		return false; 
		} else { 
 
		$(".main_image img").animate({ opacity: 0}, 250 );
		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
		$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
		$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
		});		
		}
		return false;
	}

Image rotator jquery avec timer

jQuery

Discussions similaires

Partager

Partager