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

**ChambreClaire** · 07/04/2008, 21h04

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 html :

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
<!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 css :

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
@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.

**AsQuel** · 18/04/2008, 11h11

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 ...

**maximenet** · 22/04/2008, 11h19

Code :

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

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

essaie comme çà

**Crawdge** · 30/05/2008, 12h33

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

et ça devrait marcher

**nicerico** · 13/07/2009, 10h25

Bonjour

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

le css :

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
 
.pics {  
    height:  61px;  
    width:   173px;  
    padding: 0;  
    margin:  0;  
	overflow: hidden;
} 
 
.pics img {   
    width:  90px; 
    height: 61px; 
    top:  0; 
    left: 0;
}

header :

Code :

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

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 :

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

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

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

jQuery

Discussions similaires

Partager

Partager