Twiiter Bootstrap carrousel rendre dynamique avec PHP

Je suis en train de faire un carrousel qui utilise Twitter Bootstrap par défaut de JavaScript et de CSS, mais les images doivent être récupérées à partir de la base de données MySQL.

Le code HTML du carrousel que je suis en train de faire dynamique avec php comme ceci:

<div class="carousel-inner">
   <div class="active item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
   </div>
   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Le résultat final pour les fichier PHP que j'attends, c'est comme cela

<div class="carousel-inner">
   <?php renderAds(); ?>
</div>

La fonction PHP que j'ai écrit, c'est comme cela :

function renderAds(){
    $query = queryAds();
    $query_exe = mysql_query($query);

    if(mysql_num_rows($query_exe) == 0){
        echo '<img src="images/sampleAd.jpg" >';
    }else{

        $numb =1;
        $flag =1;
        while($fetched_data = mysql_fetch_array($query_exe)){

            if($numb == 1){
                if($flag == 1){
                    echo '<div class="active item">';
                }else{
                    echo '<div class="item">';
                }
            }elseif($numb == 4){
                echo '<a href="'.$fetched_data['url'].'"  class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
                echo '</div>';
                $numb =0;
            }else{
                echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
            }
            $numb++;
            $flag++;
        }


        echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>';
        echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>';
    }


}

Ici, en s'en distinguant par défaut carrousel de twitter bootstrap, j'ai fait chaque diapositive avec 4 images, je m'attends à ce que chaque transition des diapositives contient 4 images plutôt qu'en tant que par défaut l'image unique pour une diapositive. En HTML, il fonctionne mais quand je le remplace par ma fonction PHP première diapositive fonctionne, mais si je appuyez sur la flèche suivant carrousel ensemble de la div s'effondre.

Comment puis-je le faire fonctionner ?

Remarque : Ici, la Dernière image doit contenir la classe marginLast, et la
d'autres devraient avoir marginTop et tirez-gauche classes.

Ce que j'attends d'être rendu en html, c'est comme cela:

<div class="carousel-inner">

            <div class="active item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <div class="item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <div class="item">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginTop">
                <img src="images/sampleAd.jpg" class="pull-left marginLast">
            </div>

            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
   </div>

Comment puis-je faire de ma fonction PHP pour afficher le résultat de balisage, comme ci-dessus?

Edit : La Sortie j'obtiens, c'est comme ceci:

<div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">

                <div class="active item">
                    <a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
                    <a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
                    <a href="sample.com"  class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a>
                </div>

                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>             
          </div><!-- end carousel-inner -->

  </div><!-- myCarousel -->

Selon balisage cela devrait fonctionner, mais il ne le fait pas, la flèche par défaut si il n'y a plus de diapositive que l'on doit être désactivé, mais il est cliquable.

  • Le problème semble être que vous êtes la création d' <div> seulement pour engourdir=1 et la création de <a> seulement pour engourdir!=1. Mais la publication de votre sortie de balisage de l'aide 🙂
  • J'ai collé la sortie, il n'a pas l'air de fonctionner, mais en fonction de balisage, il doit travailler et il devrait y avoir quatre éléments seulement trois sont là
InformationsquelleAutor monk | 2012-09-07