Forum : Gerer un carrousel dynamiquement en php

slt a tous, actu je developpe une application web et donc moi j ai besoin de votre aide. en effet je veux realiser un systeme de carrousel dynamiquement, cad que les images du carrousel seront issues de la base de donnees. mais quand je recupere les images dans un objet comme ceci:

$listeImages = $this->request('Pages','getUrl');

; et je les affiche comme cela:

foreach($listeImages as $k=>$v):  
             <div id= "slide" class="slide">
                   <div class="visuel">
                      <img src="<?php echo Router::webroot('img/'.$v->file);?> ">
                   </div>
                   <div class="titre">
                      <?php echo $v->name;?>
                   </div>
             </div>

les images ne s'affiche pas comme je le souhaite, donc j'aimerais savoir s'il etait possible de fait afficher toutes les images dans l'objet que j'ai recupere en meme tant?

antho07

Réponse acceptée

C'est donc l'affichage par le php qui ne convient pas?
"s'afficher correctement" , tu peux nous décrire ce que tu veux comme affichage?

Afficher toute en même temps ça veut dire quoi ??
Le php s'éxécute coté serveur donc lorsque ta page est chargée dans un navigateur, toutes les images sont dans la page une fois celle-ci réceptionnée.

C'est pour ça que je demande le code html qui fonctionne parfaitement avec ton code js (donc sans php en mettant les images à la main)

et ensuite le code de la page après appel php où tu sembles nous dire que y'as un soucis ...

antho07

Bonjour copie colle le code html qui fonctionne bien (celui sans faire appel au php)
Et celui généré par le php

cordialement

Antho

Scofield Hitsdebabi

Auteur

ce code fonctione tres bien bien mais le probleme c'est que c'est la premiere image qui fais le carrousel.
dans le premiere je recupere les images , dans le second il me permet d'afficher le images mais comme je suis dans une boucle il affiche les meme image un nombre fini de fois . donc moi j aimerais savoir sil je pouvait modifier le comportement de la boucle.

antho07

heu?

la première image qui fait le carrousel????

comme je suis dans une boucle il affiche les mêmes images un nombre fini de fois???

antho07

Si le code html est bon après exécution du php.. il nous faudrait le code js dans ce cas.. celui qui gère l'affichage du carrousel

Scofield Hitsdebabi

Auteur

le code js est :

var carrousel = {
    nbSlide :0,
    nbCurrent :1,
    elemCurrent :null,
    elem :null,
    timer: null,
        init : function(elem){
            this.nbSlide = elem.find(".slide").length;
            //creation de la pagination
            elem.append("<div class='navigation'><div>");
            for(var i=1; i<=this.nbSlide;i++){
                elem.find('.navigation').append("<span>"+i+"</span>");
            }
            elem.find('.navigation span').click(function(){
                carrousel.gotoSlide($(this).text());});
            // initialisation du carrousel
            this.elem =elem;
            elem.find('.slide').hide();
            elem.find('.slide:first').show();
            this.elemCurrent = elem.find('.slide:first');
            this.elem.find(".navigation span:first").addClass('active');
            // on creer le timer
             carrousel.play();
            // stop quand on passe le timer dessus
            this.elem.mouseover(carrousel.stop);
            this.elem.mouseout(carrousel.play);
        },
        gotoSlide:function(num){
            if(num == this.nbCurrent){return false;}

            // animation en slide
              var sens =1;
              if(num > this.nbCurrent){sens =-1}
              var cssDeb = {'left':sens*this.elem.width()};
              var cssFin = {'left':-sens*this.elem.width()};
              this.elem.find("#slide"+ num).show().css(cssDeb);
              this.elem.find("#slide"+ num).animate({"top":0,"left":0},500);
              this.elemCurrent.animate(cssFin,500);

              this.elem.find(".navigation span").removeClass('active');
              this.elem.find(".navigation span:eq(" +(num-1)+")").addClass('active');
              this.nbCurrent = num;
              this.elemCurrent = this.elem.find("#slide"+ num);
        },
       next:function () {
        var num =this.nbCurrent+1;
        if(num>this.nbSlide){
            num = 1;
        }
        this.gotoSlide(num);
       },
       prev:function () {
       var num =this.nbCurrent-1;
        if(num <1){
            num = this.nbSlide;
        }
        this.gotoSlide(num);
       },
      stop:function(){
        window.clearInterval(carrousel.timer);
      },
      play:function(){
        window.clearInterval(carrousel.timer);
         this.timer = window.setInterval("carrousel.next()",5000);
      }
}
$(function(){
   carrousel.init($("#carrousel"));

});

quand je dis que : comme je suis dans une boucle il affiche les mêmes images un nombre fini de fois,
je veus dire par la que si par exemple ya 10 images dans l'objet les 10 images vont s'affiche les une a la suite de autre.

antho07

Ta question porte sur l'ordre des images?
Elle porte sur un arrêt du carroussel ?

Scofield Hitsdebabi

Auteur

ma question porte sur comment permette que les images qui sont dans l'objet puisse s'affiche corrctement dans la boucle?

Gerer un carrousel dynamiquement en php

8 réponses