[JQuery] [débutant] Utiliser le plugin cycle de JQuery

Version imprimable

Bonjour, je débute totalement dans l'utilisation d'Ajax et de Jquery, cependant
j'ai besoin d'utiliser le plugin cycle pour faire un petit fondu enchainé.

J'ai tenté de reproduire le code des exemples mais sans succés, car les trois
images s'affichent les unes en dessous des autres.
(liens vers le site du plugin : http://malsup.com/jquery/cycle/begin.html)

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">$('#s1').cycle('fade');</script>
<style type="text/css">@IMPORT url("cycleTest.css");</style>
<title>Insert title here</title>
</head>
<body>
 
<div class="pics" > 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 
 
 
 
</body>
</html>

Côté css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@CHARSET "UTF-8";
.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

Si quelqu'un pouvait m'expliquer où ça coince...

Merci d'avance.

18/04/2008, 11h11
AsQuel

Je pense que si tu exécutes ta fonction de fading avant le chargement complet de la page et surtout avant le chargement de tes css, cela aura du mal à marcher ...

Code:

1
2
3
4
 
$(document).ready(function(){
$('.pics').cycle('fade');
});

essaie comme çà

30/05/2008, 12h33
Crawdge

je sais pas si tu cherche encore mais dans ton css, à ta classe pics rajoute :
overflow: hidden

et ça devrait marcher ;)

Bonjour

je me permet de relancer ce post car j'ai le meme probleme

le css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.pics {  
    height:  61px;  
    width:   173px;  
    padding: 0;  
    margin:  0;  
	overflow: hidden;
} 
 
.pics img {   
    width:  90px; 
    height: 61px; 
    top:  0; 
    left: 0;
}

header :

Code:

1
2
3
4
5
6
7
8
9
10
 
<link href="css/style_home.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Includes/Functions/jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js?v2.65"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({
    fx: 'scrollDown'
});
</script>

dans le corps :

Code:

1
2
3
4
5
6
 
                <div id="s2" class="pics"> 
                    <a href="videophototemp.php" ><img src="Images/accueil.jpg" border="0" width="90" height="61"/></a>
                    <a href="videophototemp.php" ><img src="Images/accueil.jpg" border="0" width="90" height="61"/></a>
                    <a href="videophototemp.php" ><img src="Images/accueil.jpg" border="0" width="90" height="61"/></a>
                </div>

merci de votre aide