Jquery implémentation de Slider

Version imprimable

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:

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,

22/09/2012, 19h02
fab256
Code:

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

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

Code:

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

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

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

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?

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:

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 :

Citation:

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

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:

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

l'appel se fait de cette facon

Code:

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:

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:

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

dont le contenu est :

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
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;
}

23/09/2012, 12h05
Blooster

Re: Jquery slider

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.

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

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:

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; }

23/09/2012, 17h37
Blooster

Ok d'accord je vais réglé le problème.
Et pour le soucis que j'ai concernant le slider lorsque chaque image passe, la taille change comment que je peut faire ?

Et pour le rendu graphique tu as une idée ? car lorsque j'applique le CSS sur la div wrapper ou slider-wrapper il s'en moque.

Merci de ton aide !
23/09/2012, 18h12
fab256
La taille de tes images n'est pas fixe, utilise un programme de traitement d'images pour modifier les dimensions. Toute les images doivent avoir la meme largeur et hauteur.

ensuite pour le CSS, ajoute ces ligne a custom-nivo-slider.css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 #slider-wrapper { width: 950px; } .nivo-caption { left: -350px; top: 0px; overflow: visible; width: 350px; } .nivoSlider { overflow: visible; left: 370px; }
23/09/2012, 20h30
Blooster

re jquery slider

J'ai réussi pour les images en faites il fallait que je décoche la liason qu'il y avait entre la hauteur et la largeur sous GIMP.
Mais par contre lorsque je met la bonne hauteur et largeur sa ne passe pas du tout dans ma div qui à pourtant les mêmes tailles. ( sa se voit à l'oeil nue, il y a facile 200px de plus de hauteur mais je ne trouve pas d'où cela vient ).

J'ai bien mis le CSS que tu m'as passé dans le fichier mais sa n'a pas du tout bougé la div.

Désolé c'est peut-être des questions bêtes, mais je te rassure j'ai passé mon week end complet à bossé la-dessus je n'y arrive pas.

Merci encore :)