Se connecter / S'enregistrer
Votre question

[AIDE] Problème de carrousel

Tags :
  • Programmation
Dernière réponse : dans Programmation
9 Avril 2010 17:40:18

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

9 Avril 2010 21:13:57

*annulation du message*
m
0
l
10 Avril 2010 10:56:53

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. ?>


m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS