Bonjour,
Me voici depuis plusieurs heures, bloqué sur un problème que je n'arrive pas à résoudre.
Pour faire simple, j'ai un carrousel réalisé avec caroufredsel dans une div portant la classe ".galerie" ayant la propriété css "display : none". J'effectue un slideDown() sur celle-ci afin de l'afficher au click() sur "afficher !" ... La div.galerie s'affiche correctement, cependant, le carrousel n'apparait pas.
J'ai essayer d'ajouter un css("display : block") lors du slideDown() sur tout les fils de .galerie mais rien n'y fait ...
Vous trouverez à cette adresse une version simplifiée de l'effet que j'essaye de réaliser :
slideDown & Caroufredsel
Le fichier html :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test CarouFredSel</title>
<style type="text/css">
* { margin:0; padding:0; }
.galerie { width:100%; padding:20px 0; background-color:#333; display:none; }
.carrousel { width:100%; height:400px; margin:20px auto; height:400px; display:block;}
.carrousel a { width:960px; height:400px; display:block; float:left; }
</style>
</head>
<body>
<p class="btn">Afficher !</p>
<div class="galerie">
<div class="carrousel">
<div id="carrousel">
<a><img src="http://lorempixel.com/960/400/nature/1"></a>
<a><img src="http://lorempixel.com/960/400/nature/2"></a>
<a><img src="http://lorempixel.com/960/400/nature/3"></a>
<a><img src="http://lorempixel.com/960/400/nature/4"></a>
<a><img src="http://lorempixel.com/960/400/nature/5"></a>
<a><img src="http://lorempixel.com/960/400/nature/6"></a>
</div>
</div>
</div>
</body>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="caroufredsel.js"></script>
<script language="javascript">
$(".btn").click(function() {
$(".galerie").slideDown();
});
$("#carrousel").caroufredsel({
width: '100%',
scroll : 1
});
</script>
</html>
Merci d'avance pour vos réponses.
Julien_M