Je veux faire apparaître des news tour à tour à l'aide d'un effet de fading

Version imprimable

Bonjour à tous !

J'ai un petit problème relatif à jquery : j'ai une liste ne news contenu dans des div que je veux faire apparaitre tour à tour à l'aide d'un fondu jquery.

Le HTML se présente ainsi :
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 <div id="contentShowArtists"> <div class="imgShowArtists"> <img src="#FICHIER" id="imgShowArtists" /> <div id="textContentShowArtists"> <div id="textShow"> <span id="titreShow">Titre1</span><br /> <span id="textBlocShow">Description1</span> </div> </div> </div> <div class="imgShowArtists"> <img src="#FICHIER2" id="imgShowArtists" /> <div id="textContentShowArtists"> <div id="textShow"> <span id="titreShow">Titre2</span><br /> <span id="textBlocShow">Description2</span> </div> </div> </div> .... </div>
J'ai cherché partout des exemples mais sans résultat.

Si qqun a une idée ?

Merci d'avance

09/11/2010, 13h18
Bovino

Sans jQuery, j'avais proposé une source qui fait cela : [SRC] Fondu enchainé

Solution jQuery :

Plugin jQuery Cycle ( exemples + documentation ) : http://jquery.malsup.com/cycle/

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
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
	$('#contentShowArtists').cycle({
		fx:'fade',
		timeout:5000,
		speed:1000
	});
});
</script>
</head>
<body>
	<div id="contentShowArtists">
		<div class="imgShowArtists">
			<img src="#FICHIER" id="imgShowArtists" />
			<div id="textContentShowArtists">
				<div id="textShow">
					<span id="titreShow">Titre1</span><br />
					<span id="textBlocShow">Description1</span>
				</div>
			</div>
		</div>
		<div class="imgShowArtists">
			<img src="#FICHIER2" id="imgShowArtists" />
			<div id="textContentShowArtists">
				<div id="textShow">
					<span id="titreShow">Titre2</span><br />
					<span id="textBlocShow">Description2</span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

09/11/2010, 13h39
baroutch

J'ai essayé cette classe mais apparemment elle ne marche pas avec les divisions, FireBug me met :

classe_img is not defined

alors que je passe bien la classe de mes divisions en paramètre de l'instanciation de la classe :

Code:

window.monFondu = new Fondu('imgShowArtists');

Peut-être que la classe ne marche qu'avec des images ?

Des idées ?
09/11/2010, 13h43
baroutch

@Sourcjean : Nikel ca marche impec !

Merci beaucoup du coup de main !
09/11/2010, 13h52
Bovino

Citation:

Envoyé par baroutch

J'ai essayé cette classe mais apparemment elle ne marche pas avec les divisions, FireBug me met :

classe_img is not defined

alors que je passe bien la classe de mes divisions en paramètre de l'instanciation de la classe :

Code:

window.monFondu = new Fondu('imgShowArtists');

Peut-être que la classe ne marche qu'avec des images ?

Des idées ?

Non, cela fonctionne avec tous types d'éléments.
Le problème vient du fait que j'ai oublié d'ajouter une propriété pour conserver la valeur du paramètre dans l'objet... :oops:

EDIT : C'est rectifié ;)