Caroufredsel et CakePhP
Bonjour,
je suis entrain de developper un site web pour une association avec cakePhp, où je veux utiliser le plugin caroufredsel pour faire une carrousel.
Sauf que ca ne marche pas du tout. J'ai fait un test avec une page html simple, cela marche sans problème mais
dès que j'utilise le framework cakePhp ca ne fonctionne pas. Donc je me demande si le problème est lié au template .ctp de cakePhp.
Vraiment je demande une aide pour que je puisse avancer. J'utilise cakePhp 2.5.5
Merci
7 réponses
Bonjour,
Le moteur de template ctp n'a aucune incidence sur les différentes librairies que tu peux utiliser.
Peut tu montrer ton code qui bloque ? Ta console te dit quelque chose ?
Cordialement,
PallMallShow
Salut PallMallShow,
la console ne signale aucune anomalie. Néamoins je te montre mon code et peut etre tu pourras m'aider:
<!-- Le code Html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Squadra Azura Offenbach ev.</title>
<!-- Bootstrap -->
<?= $this->Html->css('bootstrap'); ?>
<?= $this->Html->css('site'); ?>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div class="container">
<div class="carrousel" id="carrousel">
<div class="slide">
<a href="#"><img src="http://lorempixel.com/994/250/nature/1" ></a>
<span class="info">Information</span>
</div>
<div class="slide">
<a href="#"><img src="http://lorempixel.com/994/250/nature/2" ></a>
<span class="info">Information</span>
</div
<div class="slide">
<a href="#"><img src="http://lorempixel.com/994/250/nature/3" ></a>
<span class="info">Information</span>
</div
</div><!-- Ende Carousel -->
</div>
<div class="container">
<div class="row">
<div class="col col-md-12">
<header class="clearfix">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#">VORSTAND</a></li>
<li><a href="#">EHRENMITGLIEDER</a></li>
<li><a href="#">AKTUELLES</a></li>
<li><a href="#">BILDERGALERIE</a></li>
<li><a href="#">SPONSOREN</a></li>
<li><a href="#">PRESSE</a></li>
<li><a href="#">IMPRESSUM</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">ARCHIV</a></li>
</ul>
</div>
<div id="brainding">
<marquee><h3>Willkommen bei Squadra Azzura Offenbach e.v.</h3></marquee>
</div>
</header>
<div class="row hauptspalte">
<div class="col col-md-3">
<div class="vbar">
<ul>
<li><a href="#">STARTSEITE</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">SCORLISTE</a></li>
<li><a href="#">UNSERE LIGA</a></li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">ANFAHRT</a></li>
<li><a href="#">WEBMASTER</a></li>
</ul>
</div><!-- End Vertical Menu-->
<div class="sign">
<h4><span class="label label-default">Anmeldung</span></h4>
<form method="post" action="#">
<div class="userLabel"><span class="label label-default">Benutzername</span></div>
<input type="text" class="form-control" placeholder="Benutzername">
<div class="userLabel"><span class="label label-default">Passwort</span></div>
<input type="text" class="form-control" placeholder="Passwort">
<div class="userLabel"><button type="submit" class="btn btn-default">Anmeldung</button></div>
</form>
</div>
</div>
<div class="col col-md-6">
<!-- Inhalt -->
<?= $this->fetch('content'); ?>
</div>
<div class="col col-md-3">
<h3>Rigth Menu </h3>
</div>
</div>
</div><!-- Col-->
</div><!-- Inhalt -->
</div><!-- Container -->
<div class="container">
<footer id="footer">
© 2014 Squadra Azzura Offenbach e.v.
</footer>
</div><!-- Ende Footer-container -->
</div><!-- Ende Main -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<?= $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min'); ?>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<?= $this->Html->script('bootstrap.min'); ?>
<?= $this->Html->script('caroufredsel'); ?>
<?= $this->Html->script('site'); ?>
</body>
</html>
<!-- Le code JavaScript -->
$('#carrousel').carouFredsel({
direction: 'up'
});
<!-- le code css -->
.carrousel{
width: 994px;
height: 250;
}
.carrousel .slide {
display: block;
width: 994px;
height: 250px;
position: relative;
}
Mon problème est que le images ne défilent pas comme il le faut, c'est à dire aucun effet
j'ai utilisé exactement le code,mais comme j'ai fait copié colé donc lees lignes sont en prémières positions
Bonjour.
Au cas où tu ne le sache pas, les liens externes à ton application CakePHP doivent comporter l'extension, même si les liens sont fait avec le helper Html::script.
De plus, il n'y a pas de soucis pour le javascript que ce soit les fichiers ou du code qui soit inclus vers la fin du code, mais c'est différent pour le CSS, il doit être inclus avant les éléments définis dans ton CSS.
Pour finir, je ne sais pas si c'est le cas dans ton code original ou si c'est uniquement dans celui que tu nous donne, mais les div fermantes de tes slides 2 et 3, ne sont pas bien refermées.
Si c'est le cas également dans ton code original, ce ne serait pas du tout étonnant que ça vienne de ça.
Pense à utiliser la balise code ], ce sera plus lisible ;)
Sinon, faudrait dire exactement le problème. Le Carousel ne fonctionne pas ? Ou tu peux pas savoir puisque aucune image ne s'affiche ? Ou alors c'est tout pété tu en as dans tout les sens ?
Ta fonction JS qui définit ton Carousel et bien à l’intérieur d'un $(document).ready(function() { ? (peut être que ça peut être ça ?).
Cordialement,
PallMallShow
Merci Lartak11 pour tes suggessions,je vais essayer de corriger les div ouverts et voir le résultat.