Problème dans le code par garffy - page 1

Bonsoir,
J'ai trouvé un script assez sympa sur le site suivant (si vous voulez voir l'exemple histoire de savoir ce que mon code aurait du donner...) :
TUTORIAL EN QUESTION
J'ai passé ma soirée à essayer de l'appliquer, mais comme il faut tout recopier et qu'il n'y a pas de fichier de base, une erreur peut vite venir.
Cela ne fonctionne pas des masses, à un moment cela donnait quelque chose, mais quand la fin du script s'est rajouté plus moyen de le faire fonctionner... De plus je ne m'y connais presque pas en JS (j'arrive juste à toucher au HTML et CSS pour le moment, ayant commencé les tutos sur le sujet début du mois), donc c'est un peu une masse incompréhensible d'information (pour moi), à part quelques infos...
J'ai essayé de faire passer le fichier dans un correcteur de Java, mais je ne comprend pas tjs tout ce que je dois modifier et ou est l'erreur...
Enfin voici mes codes HTML, CSS et JS:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="carrousel" href="carrousel.css" />
	 
	   <script type="text/javascript" src="jquery.js"></script>
	   <script type="text/javascript" src="carrousel.js"></script>
   </head>
   <body>
   <div id="conteneurs">
		<div id="carrousel">
			<div id="slide1" class="slide">
					<div class="visu">
						<img src="img/slide1.jpg"/>
					</div>
					<div class="title">
						un titre1
					</div>
			</div>
				<div id="slide2" class="slide">
					<div class="visu">
						<img src="img/slide2.jpg"/>
					</div>
					<div class="title">
						un titre2
					</div>
				</div>
				<div id="slide3" class="slide">
					<div class="visu">
						<img src="img/slide3.jpg"/>
					</div>
					<div class="title">
						un titre3
					</div>
				</div>
				<!--
				<div class="navigation">
					<span>1</span>
					<span>2</span>
					<span>3</span>
				</div>
				-->


		</div>
   </div>

   </body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Cliff Tailor, 10-12 Rue des Tongres, 1040 Bruxelles</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="carrousel" href="carrousel.css" />
	 
	   <script type="text/javascript" src="jquery.js"></script>
	   <script type="text/javascript" src="carrousel.js"></script>
   </head>
   <body>
   <div id="conteneurs">
		<div id="carrousel">
			<div id="slide1" class="slide">
					<div class="visu">
						<img src="img/slide1.jpg"/>
					</div>
					<div class="title">
						un titre1
					</div>
			</div>
				<div id="slide2" class="slide">
					<div class="visu">
						<img src="img/slide2.jpg"/>
					</div>
					<div class="title">
						un titre2
					</div>
				</div>
				<div id="slide3" class="slide">
					<div class="visu">
						<img src="img/slide3.jpg"/>
					</div>
					<div class="title">
						un titre3
					</div>
				</div>
				<!--
				<div class="navigation">
					<span>1</span>
					<span>2</span>
					<span>3</span>
				</div>
				-->


		</div>
   </div>

   </body>
</html>

var carrousel = {

	nbSlide: 0,  //Nbre de slide
	nbCurrent:1,
	elemCurrent: null,
	elem: null,
	timer:null,
	
	init: function(elem){
		this.nbSlide = elem.find('.slide').length;
		
		//Créer la pagination
		elem.append('<div class="navigation"></div>');
		for(var i=1;i<=this.nbSlide;i++){
			elem.find('.navigation').append('<span>'+i+'</span>');
			}
		elem.find('.navigation span').click(function(){carrousel.gotoSlide($(this).text()); })
		
		//initialisation du carrousel
		this.elem=elem;
		elem.find('.slide').hide();
		elem.find('slide:first').show();
		this.elemCurrent = elem.find('.slide:first');
		this.elem.find('.navigation span:first').addClass('active');
		
		//on crée le timer
		carrousel.play(); 
		
		//Stop qd on passe dessus
		elem.mouseover(carrousel.stop);
		elem.mouseout(carrousel.play);
		
		},
		
		gotoSlide : function(num){
			if(num==this.nbCurrent){return false;}
			
			
			/*animation en fadeIn/FadeOut, les retirer si désir de fondu
			this.elemCurrent.fadeOut();
			this.elem.find('#slide'+num).fadeIn();
			*/
			/*Animation en slide
			var sens = 1;
			if(num<this.nbCurrent){ sens = -1;}
			var cssDeb = {'left' : sens*this.elem.width()};
			var cssFin = {'left' : -sens*this.elem.width()};
			this.elem.find('#slide'+num).show().css(cssDeb);
			this.elem.find('#slide'+num).animate({'top':0, 'left':0},500);
			this.elemCurrent.animate(cssFin,500);
			*/
			/*Animation acceptée par plus de navigateur*/
			this.elemCurrent.find('.visu').fadeOut();
			this.elem.find('#slide'+num).show();
			this.elem.find('#slide'+num+'.visu').hide().fadeIn();
			
			var titleHeight = this.elemCurrent.find('.title').height();
			
			this.elemCurrent.find('.title').animate({'bottom': - titleHeight},500);
			this.elem.find('#slide'+num+'.title').css('bottom',-titleHeight).animate({'bottom':0},500);
			/*fin3eme anim*/
			
			
			this.elem.find('.navigation span').removeClass('active');
			this.elem.find('.navigation span:eq('+(num-1)+')').addClass('active');
			this.nbCurrent = num;
			this.elemCurrent = this.elem.find('#slide'+num);
		},
		
		next:function(){
		var num = this.nbCurrent+1;
		if(num>this.nbSlide){
			num = 1;
			}
			this.gotoSlide(num);
			},
			
		prev:function(){
		var num = this.nbCurrent-1;
		if(num < 1){
			num = this.nbSlide;
			}
			this.gotoSlide(num);
			},
		stop:function(){
			window.clearInterval(carrousel.timer);
			},
			
			play:function(){
			window.clearInterval(carrousel.timer);
			this.timer=window.setInterval('carrousel.next()',2000);//=nombre de seconde, 1000=une sec!
		}
		
		},
		
		$(function(){
			carrousel.init($('#carrousel'));
		});

Voila, désolé si ca fait un peu brouillon..
Si cela se trouve, l'erreur réside tout simplement dans des parenthèses ou autres signes mal placés, mais je n'arrive absolument pas à tout localiser...
Déjà des le début l'image N°1 ne s'affichait pas. Il y avait juste un espace blanc. Le switch automatique du slide 1 au 2 se fait, mais se bloque au n°2 sans passer au 3ème, sauf si je clique sur la 3eme case (qui du coup bloque l'image au slide 3 sans possibilité de passer a un autre slide). De plus une fois l'ecriture du script terminée, les cases de choix 1-2-3 ne s'affichent plus..
Un grand merci, et désolé du dérangement,
Bonne nuit

T'as tout recopié ? lol ! :lol:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="../theme/style.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="carrousel.css" type="text/css" media="screen" />
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="carrousel.js"></script>

</head>

<body>
  <div id="conteneur">
     <div id="carrousel">
	<div id="slide1" class="slide">
	    <div class="visu">
		<img src="img/slide1.jpg"/>
	    </div>
	    <div class="title">
		Un titre
	    </div>

	</div>
	
	<div id="slide2" class="slide">
	    <div class="visu">
		<img src="img/slide2.jpg"/>
	    </div>
	    <div class="title">
		Un titre 2
	    </div>
	</div>

	
	
	<div id="slide3" class="slide">
	    <div class="visu">
		<img src="img/slide3.jpg"/>
	    </div>
	    <div class="title">
		Un titre pour la troisieme fois
	    </div>
	</div>
	
	<div id="slide4" class="slide">

	    <div class="visu">
		<p>Mais on peut mettre de l'HTML ?</p>
		<p>Oui même des liens, par exemple <a href="http://grafikart.fr">Grafikart.fr</a></p>
	    </div>
	    <div class="title">
		Un titre pour la troisieme fois
	    </div>
	</div>

	<!--
	<div class="navigation">
	    <span>1</span>
	    <span>2</span>
	    <span>3</span>
	</div>
	-->
     </div>
  </div>
  
  <p>Note : Lorsque vous passez la souris au dessus du carrousel le défilement automatique s'arrête.</p>
</body>
</html>

carrousel.css

carrousel.js

garffy

26 août 2010 à 1:35:20

breizh3

26 août 2010 à 12:15:55

26 août 2010 à 19:38:24

Oui lol ;-) Je savais pas où trouver le code source donc j'ai du me coltiner tout ca, c'est sur que c'est plus rapide en faisant un copier coller de ta version, et au moins pas d'erreurs lol...
Un grand merci pour ton aide

Problème dans le code

Problème dans le code

Supprimer

Modérer

Signaler le message aux modérateurs