Jquery implémentation de Slider

**Blooster** · 22/09/2012, 19h06

Bonjour à tous,

Après avoir regardé énormément de tutoriel je n'arrive absolument pas à avoir quelque chose de correcte pour mon slider.

Voici mon code :

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
<!DOCTYPE html>
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<head>
		<title> Nivo slider </title>
		<link rel ="stylesheet" href = "style.css" type = "text/css">
		<script src = "jquery-1.7.1.min.js" type = "text/javascript"> </script>
		<script src = "jquery.nivo.slider.js" type = "text/javascript"> </script>
		<script type ="text/javascript">
			$(document).ready(function()
			{
				$("#slider").easySlider();
			});
		</script>
	</head>
 
	<body>
		<div id = "wrapper">
			<div id = "slider-wrapper">	
				<div id="slider">
					<img src="./Image/c.jpg" alt="" />
				    <img src="./Image/Test_1.png" alt="" />
				    <img src="./Image/paysage.jpg" alt="" />
				</div>
				<div id = "htmlcaption" clas = "nivo-html-caption">
					<strong>image</strong> <a href = "#">tag</a>
			</div>
		</div>
	</body>
</html>

J'ai mis le css qui correspond au fichier nivo.slider.css

Merci à ceux qui prendront la peine de répondre à mon post.

Cordialement,

**fab256** · 22/09/2012, 20h02

Code :

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

<div id = "htmlcaption" clas = "nivo-html-caption">

Ce div n'est pas fermé, et il manque un 's' a 'class'

Code :

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

<img src="./Image/c.jpg" alt="" />

Evite les majuscule dans les nom de fichiers et repertoires, on ne connais pas la structure de ton site mais j'imagine un index.html et un repertoire image donc ca devrais s'écrire comme cela

Code :

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

<img src="image/c.jpg" alt="" />

Le site que tu a donné en exemple utilise un structure simple

Code :

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

1
2
3
4
5
6
<div id="slider">
	<img src="monstersinc.jpg" alt="" />
	<img src="nemo.jpg" alt="" />
	<img src="up.jpg" alt="" title="This is an example of a caption" />
	<img src="walle.jpg" alt="" />
</div>

Donne-nous l'adresse de ta page pour mieux te conseiller, ou bien les messages d'erreurs que tu as dans la console?

**Blooster** · 22/09/2012, 20h27

Tout d'abord merci de m'avoir répondu rapidement.
j'ai un siteweb complet mais pour l'instant j'essaie de juste créer le slider mais je peut toujours te passé un lien uploadé sur un serveur.

Voici le lien de ce que cela me fait ( dezoom totale ):

http://www.imagup.com/data/1163000487.html

Voilà j'ai corrigé les erreurs.

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
<!DOCTYPE html>
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<head>
		<title> Nivo slider </title>
		<link rel ="stylesheet" href = "style.css" type = "text/css">
		<script src = "jquery-1.7.1.min.js" type = "text/javascript"> </script>
		<script src = "jquery.nivo.slider.js" type = "text/javascript"> </script>
		<script type ="text/javascript">
			$(document).ready(function()
			{
				$("#slider").easySlider();
			});
		</script>
	</head>
 
	<body>
		<div id = "wrapper">
			<div id = "slider-wrapper">	
				<div id="slider">
					<img src="./image/vigne.jpg" alt="" />
				    <img src="./image/beau.jpg" alt="" />
				    <img src="./image/paysage.jpg" alt="" />
				</div>
				<div id = "htmlcaption" class = "nivo-html-caption">
					<strong>image</strong> <a href = "#">tag</a>
			</div>
		</div>
	</body>
</html>

Bon les images ont pas vraiment de rapport mais c'est un exemple, les dimensions sont différentes mais sur mon site une longueur et largeur commune sont affecté au photos.

Une erreur s'affiche en console de firebug :

TypeError: $("#slider").easySlider is not a function
[Stopper sur une erreur]

$("#slider").easySlider();

Ce que je ne comprend puisque j'importe bien les fichiers.

Merci de ton aide

**fab256** · 23/09/2012, 09h51

Ta toujours 4 DIV ouvrants et 3 DIV fermants! Ajoute une </DIV>

le plugin que tu as chargé s'appelle nivoSlider et non pas easySlider!!!

l'entete il faut ajouter le CSS

Code :

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

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

l'appel se fait de cette facon

Code :

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

1
2
3
4
5
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Ou si tu veux les memes parametres que le site en exemple

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
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
		slices:15,
		animSpeed:500,
		pauseTime:3000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
      controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>

Pour avoir exactement le meme rendu il faut aussi charger une autre CSS personalisé (apres nivo-slider.css)

Code :

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

<link rel="stylesheet" href="custom-nivo-slider.css" type="text/css" media="screen" />

dont le contenu est :

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
#slider {
	position:relative;
	width:550px;
	margin:30px 30px 60px 30px;
	background:#202834 url(loading.gif) no-repeat 50% 50%;
	-moz-box-shadow:0px 0px 10px #333;
	-webkit-box-shadow:0px 0px 10px #333;
	box-shadow:0px 0px 10px #333;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
}
 
.nivo-controlNav {
	position:absolute;
	left:47%;
	bottom:-30px;
}
.nivo-controlNav a {
	display:block;
	width:10px;
	height:10px;
	background:url(bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:-10px 0;
}
 
.nivo-directionNav a {
	display:block;
	width:32px;
	height:34px;
	background:url(arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-32px 0;
	right:10px;
}
a.nivo-prevNav {
	left:10px;
}

**Blooster** · 23/09/2012, 13h05

Merci beaucoup ça marche niquel, c'était surtout un problème d'appel d'une méthode où j'importais pas les fichiers qui fallait ( car j'ai essayé plusieurs sliders), je te remercie beaucoup.

Cependant il me reste quelque petit problème à réglé :
1) les flèches et les petits rond ( lorsque je clique dessus cela change de d'image ), sauf que les flèches ne s'affiche pas. Et j'aimerais que les ronds soit en bas de l'image car là j'en est aucun.

2) Et lorsque cela change de photo j'ai aussi ma longueur de mon slider qui bouge légèrement d'une photo à une autre.

3) Le rendu graphique doit être comme sa avec le slider qui marche:

http://www.imagup.com/data/1163059409.html

Et moi j'obtiens sa sur le site :

http://champagne-didier-charpentier.fr/index.html

Donc j'ai un problème car ma div wrapper et ma div slider-wrapper sont décalé et il faudrait que j'arrive à augmenté la taille du slider.

En espérant avoir été assez claire.
Je te remercie pour ton aide.

**fab256** · 23/09/2012, 18h27

Il faudrait consulter la console d'erreur, y'a pleins d'images que ta page ne trouve pas...

Code :

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

1
2
3
http://champagne-didier-charpentier.fr/loading.gif 
http://champagne-didier-charpentier.fr/fleche.jpg
http://champagne-didier-charpentier.fr/bullets.png

fichier custom-nivo-slider.css

Code :

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

1
2
3
4
5
6
7
8
.nivo-directionNav a {
	display:block;
	width:32px;
	height:34px;
	background:url(fleche.jpg) no-repeat;
	text-indent:-9999px;
	border:0;
}

Jquery implémentation de Slider

jQuery

Vue hybride

Discussions similaires

Partager

Partager