Bonjour à tous,

Je vous écris pour vous faire part d'une petite mise à jour que j'aimerais réaliser sur un petit module Jquery fait par Texotela. Ce module permet d'afficher du texte dans un div et d'en changer toutes les X secondes avec un effet de Fade.

Le module marche parfaitement mais j'aimerais juste pouvoir passer à la news suivante sans attendre le chargement après les X secondes.

Voici le site Internet où vous pourrez trouver le module Jquery si cela peut aider certains : http://www.texotela.co.uk/code/jquery/newsticker/

Voici le code source :

//Code Javascript

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
jQuery.fn.newsTicker = jQuery.fn.newsticker = function(delay)
{
	return this.each(
		function()
		{
			if(this.nodeName.toLowerCase()!= "ul") return;
			delay = delay || 4000;
			var self = this;
			self.items = jQuery("li", self);
			// hide all items (except first one)
			self.items.not(":eq(0)").hide().end();
			// current item
			self.currentitem = 0;
			var doTick = function()
			{
				jQuery.newsticker(self);
			}
			setInterval(doTick,delay);
		}
	)
	.addClass("newsticker")
	.hover(
		function()
		{
			// pause if hovered over
			this.pause = true;
		},
		function()
		{
			// unpause when not hovered over
			this.pause = false;
		}
	);
}
jQuery.newsticker = function(el)
{
	// return if hovered over
	if(el.pause) return;
	// hide current item
	jQuery(el.items[el.currentitem]).fadeOut("slow",
		function()
		{
			jQuery(this).hide();
			// move to next item and show
			el.currentitem = ++el.currentitem % (el.items.size());
			jQuery(el.items[el.currentitem]).fadeIn("slow");
		}
	);
}
 
$(document).ready(
	function()
	{
		$("#news").newsTicker();
	}
);
//Code HTML

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
            <ul id="news">
                <li><h2 class="back_ground">Test n°1<BR />Ceci est un test numéro 1</h2></li>
                <li><h2 class="back_ground">Test n°2<BR />Ceci est un test numéro 2</h2></li>
                <li><h2 class="back_ground">Test n°3<BR />Ceci est un test numéro 3</h2></li>
                <li><h2 class="back_ground">Test n°4<BR />Ceci est un test numéro 4</h2></li>
            </ul>

Avez-vous une idées chers professionnels du javascript / Jquery ? Par exemple créer une fonction suivante() qui permettrait de passer à la news qui suit...

Merci d'avance