Se connecter avec
S'enregistrer | Connectez-vous

[AIDE] Problème de carrousel

Dernière réponse : dans Programmation

Salut !

J'ai suivi un tuto pour réaliser un carrousel, tout c'est bien passé j'ai réussi à en créer un.
J'ai fait un espace d'administration pour ce carrousel. L'espace d'administration me sert à ajouter,modifier ou supprimer des articles. Pour ces fonctions tous ce passe bien.

Seulement maintenant mon caroussel déconne un peu.
Il triple mes news (123123123) et elle ne s'affichent pas très bien (news1 news2 news2 titrenews1 seulement).

Il doit avoir un dysfonctionnement mais je ne sais pas où.

Voici mes sources (pas encore sur le net) :

- vues du carrousel:


  1. <head>
  2. 	<link rel="stylesheet" href="<?php echo RACINE ?>vues/css/carrousel.css" type="text/css" media="screen" />
  3. 	<script type="text/javascript" src="<?php echo RACINE ?>vues/js/carrousel.js"></script>
  4. </head>     
  5.  
  6. <?php 
  7.   // accès direct interdit
  8.   defined('RACINE') or die('accès direct interdit');
  9.  
  10.   // connexion à la base de données et sélection de la base 
  11.   require(RACINE."modeles/modele.php");
  12.  
  13.   // selection des enregistrements
  14.   $sql = "SELECT * FROM carrousel ORDER BY id DESC";
  15.   $resultat = mysql_query ($sql);  
  16.  
  17.   // Récupération des données
  18.   $tableau = array();
  19.   while ($carrousel = mysql_fetch_assoc ($resultat))
  20.   {
  21.     $tableau[] = $carrousel;
  22.   } 
  23.  
  24.   // fermeture de la connexion
  25.   mysql_close($liendb);
  26. ?>
  27. 	  <?php
  28.  
  29.           // écriture des lignes du tableau
  30.           $i=0;
  31. 		  foreach ($tableau as $carrousel)
  32.           {
  33. 		  if($i<6){
  34. 		    $photo = $carrousel['photo'];
  35.             $titre = $carrousel['titre'];
  36. 			$texte = $carrousel['texte'];
  37. 	  ?>
  38.  
  39. 	  <div id="slide1" class="slide">
  40. 	    <div class="visu">
  41. 		  <img src="<?php echo RACINE.$photo; ?>" alt="<?php echo $titre; ?>"/>
  42. 		</div>
  43. 		<div class="title">
  44. 		 <a href="*"><?php echo $titre; ?></a>
  45. 		</div>
  46. 		<div class="texte">
  47. 		 <?php echo $texte; ?>
  48. 		</div>
  49. 	  </div>
  50.  
  51. 	  <div id="slide2" class="slide">
  52. 	    <div class="visu">
  53. 		  <img src="<?php echo RACINE.$photo; ?>" alt="<?php echo $titre; ?>"/>
  54. 		</div>
  55. 		<div class="title">
  56. 		 <a href="*"><?php echo $titre; ?></a>
  57. 		</div>
  58. 		<div class="texte">
  59. 		 <?php echo $texte; ?>
  60. 		</div>
  61. 	  </div>
  62.  
  63. 	  <div id="slide3" class="slide">
  64. 	    <div class="visu">
  65. 		  <img src="<?php echo RACINE.$photo; ?>" alt="<?php echo $titre; ?>"/>
  66. 		</div>
  67. 		<div class="title">
  68. 		 <a href="*"><?php echo $titre; ?></a>
  69. 		</div>
  70. 		<div class="texte">
  71. 		 <?php echo $texte; ?>
  72. 		</div>
  73. 	  </div>
  74.  
  75.  
  76. 	  <?php
  77.           $i++;
  78.                   }
  79. 		  }
  80. 	  ?>


- Javascript du carrousel

  1. var carrousel={
  2.    nbSlide:0,
  3.    nbCurrent:1,
  4.    elemCurrent:null,
  5.    elem:null,
  6.    timer:null,
  7.  
  8.    init:function(elem){
  9.      this.nbSlide=elem.find(".slide").length;
  10.  
  11. 	 /* Création de la pagination */
  12. 	 elem.append('<div class="navigation"></div>');
  13. 	 for(var i=1;i<=this.nbSlide;i++){
  14. 	   elem.find(".navigation").append("<span>"+i+"</span>");
  15. 	 }
  16.      elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
  17.  
  18. 	 /* Initialisation du carrousel */
  19.      this.elem=elem;
  20. 	 elem.find(".slide").hide();
  21. 	 elem.find(".slide:first").show();
  22. 	 this.elemCurrent=elem.find(".slide:first");
  23. 	 this.elem.find(".navigation").css("opacity",0.6);
  24. 	 this.elem.find(".navigation span:first").addClass("active");
  25.  
  26. 	 /* Création du timer */
  27. 	 carrousel.play();
  28. 	 /* Stop quand on passe dessus */
  29. 	 elem.mouseover(carrousel.stop);
  30. 	 elem.mouseout(carrousel.play);
  31.    },
  32.  
  33.    gotoSlide:function(num){
  34.      if(num==this.nbCurrent){return false;}
  35.  
  36. 	 /* Animation en fadeIn/fadeOut
  37.     this.elemCurrent.fadeOut();
  38. 	this.elem.find("#slide"+num).fadeIn();
  39. 	*/
  40. 	/* Animation en slide 
  41. 	var sens = 1;
  42. 	if(num<this.nbCurrent){sens = -1;}
  43. 	var cssDeb = {"left" : sens* this.elem.width()};
  44. 	var cssFin = {"left" : -sens* this.elem.width()};
  45. 	this.elem.find("#slide"+num).show().css(cssDeb)
  46. 	this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
  47. 	this.elemCurrent.animate(cssFin,500);
  48. 	*/
  49.  
  50.      this.elemCurrent.find(".visu").fadeOut();
  51. 	 this.elem.find("#slide"+num).show();
  52. 	 this.elem.find("#slide"+num+" .visu").hide().fadeIn();
  53.  
  54. 	 var titleHeight=this.elemCurrent.find(".title").height();
  55.  
  56. 	 this.elemCurrent.find(".title").animate({"bottom":-titleHeight},500);
  57. 	 this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom":0},500);
  58.  
  59. 	 this.elem.find(".navigation span").removeClass("active");
  60. 	 this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
  61. 	 this.nbCurrent=num;
  62. 	 this.elemCurrent=this.elem.find("#slide"+num);
  63.    },
  64.  
  65.    next:function(){
  66.      var num=this.nbCurrent+1;
  67. 	 if(num>this.nbSlide){
  68. 	   num=1;
  69.      }
  70.     this.gotoSlide(num);
  71.    },
  72.  
  73.    prev:function(){
  74.      var num=this.nbCurrent-1;
  75. 	 if(num<1){
  76. 	   num=this.nbSlide;
  77. 	 }
  78.     this.gotoSlide(num);
  79.    },
  80.  
  81.    stop:function(){
  82.      window.clearInterval(carrousel.timer);
  83.    },
  84.    play:function(){window.clearInterval(carrousel.timer);
  85.      carrousel.timer=window.setInterval("carrousel.next()",5000);
  86.    }
  87. }
  88.  
  89. $(function(){
  90.   carrousel.init($("#carrousel"));
  91.  
  92. });






Du coté administration tous ce passe bien donc je ne croit pas que ça vient de là.

Je demande votre aide. Merci d'avance.

Autres pages sur : aide probleme carrousel

Lassé par la pub ? Créez un compte

De base le carrousel marche bien.
Voici le code "Vue du carrousel" au départ (après le tuto) :

  1. <div id="carrousel">
  2.  
  3. 	<div id="slide1" class="slide">
  4. 	    <div class="visu">
  5. 		<img src="<?php echo RACINE ?>images/img1.jpg"/>
  6. 	    </div>
  7. 	    <div class="title">
  8. 		Titre 1
  9. 	    </div>
  10.         </div>
  11.  
  12. 	<div id="slide2" class="slide">
  13. 	    <div class="visu">
  14. 		<img src="<?php echo RACINE ?>images/img2.jpg"/>
  15. 	    </div>
  16. 	    <div class="title">
  17. 		Titre 2
  18. 	    </div>
  19. 	</div>
  20.  
  21. 	<div id="slide3" class="slide">
  22. 	    <div class="visu">
  23. 		<img src="<?php echo RACINE ?>images/img3.jpg"/>
  24. 	    </div>
  25. 	    <div class="title">
  26. 		Titre 3
  27. 	    </div>
  28. 	</div>
  29.  
  30.    </div>




Le Javascript pour le carrousel :


  1. var carrousel={
  2.    nbSlide:0,
  3.    nbCurrent:1,
  4.    elemCurrent:null,
  5.    elem:null,
  6.    timer:null,
  7.  
  8.    init:function(elem){
  9.      this.nbSlide=elem.find(".slide").length;
  10.  
  11. 	 /* Création de la pagination */
  12. 	 elem.append('<div class="navigation"></div>');
  13. 	 for(var i=1;i<=this.nbSlide;i++){
  14. 	   elem.find(".navigation").append("<span>"+i+"</span>");
  15. 	 }
  16.      elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
  17.  
  18. 	 /* Initialisation du carrousel */
  19.      this.elem=elem;
  20. 	 elem.find(".slide").hide();
  21. 	 elem.find(".slide:first").show();
  22. 	 this.elemCurrent=elem.find(".slide:first");
  23. 	 this.elem.find(".navigation").css("opacity",0.6);
  24. 	 this.elem.find(".navigation span:first").addClass("active");
  25.  
  26. 	 /* Création du timer */
  27. 	 carrousel.play();
  28. 	 /* Stop quand on passe dessus */
  29. 	 elem.mouseover(carrousel.stop);
  30. 	 elem.mouseout(carrousel.play);
  31.    },
  32.  
  33.    gotoSlide:function(num){
  34.      if(num==this.nbCurrent){return false;}
  35.  
  36. 	 /* Animation en fadeIn/fadeOut
  37.     this.elemCurrent.fadeOut();
  38. 	this.elem.find("#slide"+num).fadeIn();
  39. 	*/
  40. 	/* Animation en slide 
  41. 	var sens = 1;
  42. 	if(num<this.nbCurrent){sens = -1;}
  43. 	var cssDeb = {"left" : sens* this.elem.width()};
  44. 	var cssFin = {"left" : -sens* this.elem.width()};
  45. 	this.elem.find("#slide"+num).show().css(cssDeb)
  46. 	this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
  47. 	this.elemCurrent.animate(cssFin,500);
  48. 	*/
  49.  
  50.      this.elemCurrent.find(".visu").fadeOut();
  51. 	 this.elem.find("#slide"+num).show();
  52. 	 this.elem.find("#slide"+num+" .visu").hide().fadeIn();
  53.  
  54. 	 var titleHeight=this.elemCurrent.find(".title").height();
  55. 	 this.elemCurrent.find(".title").animate({"bottom":-titleHeight},500);
  56. 	 this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom":0},500);
  57.  
  58. 	 this.elem.find(".navigation span").removeClass("active");
  59. 	 this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
  60. 	 this.nbCurrent=num;
  61. 	 this.elemCurrent=this.elem.find("#slide"+num);
  62.    },
  63.  
  64.    next:function(){
  65.      var num=this.nbCurrent+1;
  66. 	 if(num>this.nbSlide){
  67. 	   num=1;
  68.      }
  69.     this.gotoSlide(num);
  70.    },
  71.  
  72.    prev:function(){
  73.      var num=this.nbCurrent-1;
  74. 	 if(num<1){
  75. 	   num=this.nbSlide;
  76. 	 }
  77.     this.gotoSlide(num);
  78.    },
  79.  
  80.    stop:function(){
  81.      window.clearInterval(carrousel.timer);
  82.    },
  83.    play:function(){window.clearInterval(carrousel.timer);
  84.      carrousel.timer=window.setInterval("carrousel.next()",5000);
  85.    }
  86. }
  87.  
  88. $(function(){
  89.   carrousel.init($("#carrousel"));
  90.  
  91. });



Et le CSS :


  1. #carrousel {
  2.   float: left;
  3.   border: solid 5px #e7dbc5;
  4.   width: 430px;
  5.   height: 200px;
  6.   position: relative;
  7.   overflow: hidden;
  8. }
  9.  
  10. .slide {
  11.   position: absolute;
  12.   top:0;
  13.   left:0;
  14.   width: 430px;
  15.   height: 200px;
  16. }
  17.  
  18. .title {
  19.   position: absolute;
  20.   bottom:0;
  21.   left:0;
  22.   width: 418px;
  23.   height: 65px;
  24.   line-height: 65px;
  25.   padding: 0 0 0 12px;
  26.   background: url(../../images/images_slide/transparence_gris.png);
  27. }
  28. .texte {
  29.   position: absolute;
  30.   bottom:0;
  31.   right:0;
  32.   width: 418px;
  33.   height: 25px;
  34.   padding: 0 0 0 12px;
  35. }
  36.  
  37. .navigation {
  38.   position: absolute;
  39.   bottom:38px;
  40.   right:5px; 
  41. }
  42. .navigation span {
  43.   background:#000;
  44.   color:#fff;
  45.   padding: 2px 4px 0 4px;
  46. }
  47. .navigation span:hover,.navigation span.active  {
  48.   background:#fff;
  49.   color:#000;
  50.   padding: 2px 4px 0 4px;
  51.   cursor: pointer;
  52. }



Donc tous ça fonctionne, mais moi je voudrais ajouter,modifier ou supprimer des articles de ce carrousel grâce à un espace d'administration déjà créé.

Voici le nouveau code "vue du carrousel"



  1. <?php
  2. // accès direct interdit
  3. defined('RACINE') or die('accès direct interdit');
  4.  
  5. // connexion à la base de données et sélection de la base
  6. require(RACINE."modeles/modele.php" );
  7.  
  8. // selection des enregistrements
  9. $sql = "SELECT * FROM carrousel ORDER BY id DESC";
  10. $resultat = mysql_query ($sql);
  11.  
  12. // Récupération des données
  13. $tableau = array();
  14. while ($carrousel = mysql_fetch_assoc ($resultat))
  15. {
  16. $tableau[] = $carrousel;
  17. }
  18.  
  19. // fermeture de la connexion
  20. mysql_close($liendb);
  21. ?>
  22.  
  23. <?php
  24.  
  25. // écriture des lignes du tableau
  26. $i=0;
  27. foreach ($tableau as $carrousel)
  28. {
  29.   if($i<6){
  30.      $photo = $carrousel['photo'];
  31.      $titre = $carrousel['titre'];
  32.      $texte = $carrousel['texte'];
  33.  
  34. ?>
  35.  
  36.  
  37. <div id="slide1" class="slide">
  38.    <div class="visu">
  39.       <img src="<?php echo RACINE.$photo; ?>" alt="<?php echo $titre; ?>"/>
  40.    </div>
  41.    <div class="title">
  42.       <a href="#"><?php echo $titre; ?></a>
  43.    </div>
  44.    <div class="texte">
  45.       <?php echo $texte; ?>
  46.    </div>
  47. </div>
  48.  
  49. <div id="slide2" class="slide">
  50.   <div class="visu">
  51.      <img src="<?php echo RACINE.$photo; ?>" alt="<?php echo $titre; ?>"/>
  52.   </div>
  53.   <div class="title">
  54.      <a href="*"><?php echo $titre; ?></a>
  55.   </div>
  56.   <div class="texte">
  57.      <?php echo $texte; ?>
  58.   </div>
  59. </div>
  60.  
  61. <div id="slide3" class="slide">
  62.    <div class="visu">
  63.       <img src="<?php echo RACINE.$photo; ?>" alt="<?php echo $titre; ?>"/>
  64.    </div>
  65.    <div class="title">
  66.       <a href="*"><?php echo $titre; ?></a>
  67.    </div>
  68.    <div class="texte">
  69.       <?php echo $texte; ?>
  70.    </div>
  71. </div>
  72.  
  73.  
  74. <?php
  75. $i++;
  76. }
  77. }
  78. ?>



Et donc tous ça me donne un bug dans le carrousel.
J'aimerais vraiment résoudre ce problème.
Avez vous une idée ?

Je pense peut-être à cette ligne du nouveau vue du carrousel :

  1. <?php
  2.  
  3. // écriture des lignes du tableau
  4. $i=0;
  5. foreach ($tableau as $carrousel)
  6. {
  7. if($i<6){
  8. $photo = $carrousel['photo'];
  9. $titre = $carrousel['titre'];
  10. $texte = $carrousel['texte'];
  11.  
  12. ?>


Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde