11515 sujets

JavaScript, DOM et API Web HTML5

Probleme avec slider accordeon jquery non actif dans html

Salut j'ai un problème, je n'arrive pas à activer le jquery dans l'html, j'ai pourtant essayé avec plusieur accordeon différents, et avec aucun je n'arrive à le faire fonctionner...j'ai bien ma liste d'images qui s'affiche dans ma page html mais il y à quelque chose que je ne fais pas bien.

Voici mon code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
		<script src="js/jquery.zaccordion.js"></script>
<title>Agence de voyage Test</title>


<script type="text/javascript">
$(document).ready(function() {
$("#featured").zAccordion({
easing: 'easeOutBounce',
timeout: 5500,
slideWidth: 600,
width: 900,
height: 310
});
});
</script>

</head>

<body>

	<div id="wrapper">
		<div id="header">
		
		<ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
                <a href="#">Nos destinations</a>
                <ul>
                        <li><a href="#">Destination Afrique</a></li>
                        <li><a href="#">Destination Asie</a></li>
                        <li><a href="#">Destination Etats Unis</a></li>
                        <li><a href="#">Destination Europe</a></li>
                </ul>
        </li>
        <li><a href="#">Nos activitées</a></li>
        <li><a href="#">Zones membres</a></li>
		<li><a href="#">A propos de nous</a></li>
        <li><a href="#">Contact</a></li>
		
	
</ul>
	
				
					<div id="featured"> ICI SLIDER Jquery <ul >
				<li>
					<img src="../image/slide1.jpg" width="600" height="270" alt="" />
				</li>
				<li>
					<img src="../image/slide2.jpg" width="600" height="270" alt="" />
				</li>
				<li>
					<img src="../image/slide3.jpg" width="600" height="270" alt="" />
				</li>
			</ul>
			

					</div><!-- Slider jquery -->
					

</script>

        
        	<div id="fb">
       	     <img src="../image/FB_butoon.png" width="40" height="42" alt="facebook" /></div><!-- fb bouton -->
				<div id="rss">
                <img src="../image/rss_butoon.png" width="40" height="42" alt="facebook" /></div
                
                </div>
			<!-- tweet -->
<h1><img src="../image/logo.png" alt="logo Agence de Voyage" /> </h1>
		
				<div id="deco_montagne">
			
				</div><!-- #deco_montagne -->
				
		</div><!-- #header -->
		
		<div id="content">
				<div id="promo"></div><!-- #promo -->
				<div id="photos"></div><!-- #photos -->
		  <div id="archives"><p>
                 <strong>ARCHIVES:</strong></p><p>
                <a href=#>- Treck au Cap vert </a></br>
				<a href=#>- Nos activités</a></br>
				<a href=#>- Vidéo du mois:Cambodge</a></br>
				<a href=#>- Votre guide pour l'Australie</a></br>
				<a href=#>- Guide du routard 2013</a></br>
                <a href=#>- Le PVT Canada</a></br>
                <a href=#>- Tourisme éco-responsable</a></br>
                <a href=#>- Les plages d'Australie</a></br>  
                <a href=#>- La Birmanie et la politique</a></br> 
                <a href=#>- Birmanie ou Myanmar ?</a></br>      
                     
                
                </div><!-- #photos -->
				
		
		  <div id="texte_intro">
		
			
			
				<p ><a href="#"><img src="../image/vignette1.jpg" alt="lire_lasuite" class="vignette" /></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut. Nunc at dolor in enim porta congue non ac magna. Integer et erat a dolor suscipit congue.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut. Nunc at dolor in enim porta congue non ac magna. Integer et erat a dolor suscipit congue.<br>
            <a href="#"><img src="../image/lire_la_suite.jpg" width="96" height="28" alt="lire_la_suite" /></a></p>
			<p> <a href="#"><img src="../image/vignette2.jpg" alt="lire_lasuite" class="vignette" /></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut. Nunc at dolor in enim porta congue non ac magna. Integer et erat a dolor suscipit congue.<br>
            <a href="#"><img src="../image/lire_la_suite.jpg" width="96" height="28" alt="lire_la_suite" /></a></p>
			<p> <a href="#"><img src="../image/vignette3.jpg" alt="lire_lasuite" class="vignette" /></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut. Nunc at dolor in enim porta congue non ac magna. Integer et erat a dolor suscipit congue.<br>
            <a href="#"><img src="../image/lire_la_suite.jpg" width="96" height="28" alt="lire_la_suite" /></a></p>
			<p> <a href="#"><img src="../image/vignette4.jpg" alt="lire_lasuite" class="vignette" /></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus nunc nibh, eget hendrerit justo egestas in. Phasellus feugiat odio vel lorem porttitor ornare. Fusce suscipit sem vel leo malesuada pellentesque. e massa feugiat ut. Nunc at dolor in enim porta congue non ac magna. Integer et erat a dolor suscipit congue.<br>
            <a href="#"><img src="../image/lire_la_suite.jpg" width="96" height="28" alt="lire_la_suite" /></a></p>
			
			</div><!-- #Texte Intro -->
          <div id="barre_marron"></div>
		</div><!-- #content -->
	
	
	
	
	
	</div><!-- #wrapper -->
	
	<div id="footer">
	<div id="footer_texte">
<p>www.myroad.net, 2013 <br>
				<div id="texte_foot">
				<li><a href=#> À propos </a></li>
				<li><a href=#> Presse et blogs  </a></li>
				<li><a href=#> Droits d'auteur </a></li>
				<li><a href=#> Créateurs et partenaires </a></li>
				<li><a href=#> Publicité</a></li>
				<li><a href=#> Développeur</a></li>
                </div><!-- #texte_foot -->
</p>
	</div><!-- #footer texte -->
	
	</div><!-- #wrapper -->
</body>
</html>


PS: J'ai bien vérifié les chemins qui pointe vers le JS. Je suis en local.

Je viens sur le forum car je me torture l'esprit à comprendre ce qui ne fonctionne pas Smiley biggol

L’accordéon en question avec le js se trouve ici:
http://www.armagost.com/zaccordion/

J'ai utilisé le même ID dans l'html " featured".


A+
Merci pour l'aide.
Bonsoir,

L'idéal serait d'avoir une page en ligne ne serait-ce que pour vérifier que tous les liens vers vos fichiers js et/ou css sont accessibles...
Commencez par vérifier le chemin d'accès vers le fichier zaccordion.js est correct, et si le script fonctionne sans erreur (peut-être un mauvais téléchargement...)
Si cela ne résout pas votre souci, merci de nous fournir une page de test.
Sujet clos
Aller à