Estoy tratando de hacer un carrusel que utiliza Twitter Bootstrap predeterminado de JavaScript y CSS, pero las imágenes deben ser obtenidos de la base de datos MySQL.

El código HTML para el carrusel que estoy tratando de hacer dinámicas con php es como este:

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

El resultado final para el archivo PHP que estoy esperando es como este

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

La función PHP que escribí es como este :

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>';
    }


}

Aquí, por diferentes de los predeterminados carrusel de twitter bootstrap, hice cada diapositiva con 4 imágenes, espero que cada uno de transición de diapositivas contiene 4 imágenes en lugar de como por defecto, la sola imagen de una diapositiva. En HTML que funciona, pero cuando puedo reemplazar con mi función de PHP primera diapositiva funciona, pero si me presione flecha siguiente en el carrusel de todo el div se derrumba.

¿Cómo puedo hacer que funcione ?

Nota : Aquí la Última imagen debe contener la clase marginLast, y el
otro debe tener marginTop y tire de la izquierda clases.

Lo que espero ser en html es como este:

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

¿Cómo puedo hacer que mi función PHP para mostrar el resultado de marcado como el de arriba?

Edit : La Salida que tengo es como este:

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

De acuerdo con marcado esto debería funcionar pero no lo hace, la flecha por defecto, si no hay más de diapositivas que uno debe ser desactivado pero se puede hacer clic.

  • El problema parece ser que se están creando <div> solo para adormecer=1 y la creación de <a> solo para adormecer!=1. Pero la publicación de su salida de marcado ayudará 🙂
  • He pegado la salida, de que no parece funcionar, pero de acuerdo a marcado que deben trabajar y no debería ser de cuatro elementos sólo tres están ahí
InformationsquelleAutor monk | 2012-09-07

4 Comentarios

  1. 5

    Han de consulta de MySQL devuelve una matriz. De esa manera, su consulta reutilizables (puede ser hecho en una función) y se pueden procesar los datos, sin embargo le parezca.

    <?php
    $mysqli = new mysqli('localhost', 'username', 'password', 'database');
    
    $sql = "SELECT * FROM table";
    $res = $mysqli->query($sql);
    
    $rows = array();
    while ($row = $res->fetch_assoc()) {
        $rows[] = $row;
    }
    ?>
    <div class="carousel">
      <div class="carousel-inner">
    <?php $i = 1; ?>
    <?php foreach ($rows as $row): ?>
    <?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
        <div class="<?php echo $item_class; ?>">
          <a href="<?php echo $row['url']; ?>">
            <img src="<?php echo $row['image']; ?>" alt="<?php echo $row['title']; ?>" />
          </a>
        </div>
    <?php $i++; ?>
    <?php endforeach; ?>
      </div>
    </div>

    Obviamente, es necesario cambiar la base de datos de consulta, así como los valores que se utilizan en los foreach bucle. También he utilizado el mysqli funciones, como la mysql funciones que ahora están en desuso en favor de MySQLi (MySQL improved).

    • así que no parece funcionar bien
    • Yo upvote aquí porque, trabajando o no, esa es la manera general deben ser codificados.
    • ¿Han cambiado las variables para reflejar la secuencia de comandos, como se indica? O ¿simplemente copiar y pegar?
    • hice cambiado, pero no hubo suerte hasta ahora.. por cierto me gusta tu estilo de programación muy mucho
    • ¿cuál debería ser el segundo argumento para mysqli_query()
    • He actualizado el fragmento de código. Creo que hubo un error de sintaxis.

  2. 2

    Creo que me salió con la respuesta para mi pregunta, aunque todas las respuestas de arriba me dio muchas ideas. Gracias a todos

    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;
            echo '<div class="carousel-inner">';
            while($fetched_data = mysql_fetch_array($query_exe)){
                if($numb == 1){
                    if($flag == 1){
                        echo '<div class="active item">';
                    }else{
                        echo '<div class="item">';
                    }
                    echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
                }elseif($numb == 4){
                    echo '<a target="_blank" href="http://'.$fetched_data['url'].'"  class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
                    $numb = 0;
                    echo '</div>';
                }else{
                    echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
                }
    
                $numb++;
                $flag++;
            }
    
            if($numb > 1 && $numb < 4 ){
                echo '</div>';
                echo '</div>';
            }elseif($numb == 1){
                echo '</div>';
            }elseif($numb == 4){
                echo '</div>';
                echo '</div>';
            }
    
            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>';
        }
    }
    • ¿cuál es la razón para que el cheque «elseif($numb == 4)» se trata de algo específico para su aplicación o lo es especialmente para el twitter carrusel?
  3. 0
    <div class="carousel-inner">
    
    <?php 
    //Twitter Bootstrap Carousel.
    $caseStudies = get_posts(array(
      'numberposts' => 12,
      'post_type'   => 'case-study',
      'meta_key'    => 'show_case_study_home',
      'meta_value'  => 'yes',
      'post_status' => 'publish',
    ));
    
    $open = 0;
    $close = 1;
    $active = 0;
    $didClose = false;
    foreach($caseStudies as $caseStudy){
    
      $image  = get_field('image_home', $caseStudy->ID);
      $header = get_field('header_home', $caseStudy->ID);
      $intro  = get_field('intro_home', $caseStudy->ID);
    
      $activeCss = "";
    
        if(($open)%4 == 0) {
          if ($active == 0) $activeCss = " active";
         echo '<div class="item'. $activeCss .'"><ul class="thumbnails">';
        }
    ?>
    
    <li class="span3">
      <div class="case-study">
      <img src="<?php echo $image['url']; ?>" alt="">
      <a href="<?php echo get_permalink($caseStudy->ID); ?>" class="btn-more read-hover">Read More</a>
      <h4><?php echo $header; ?></h4>
      <p><?php echo $intro; ?></p>
      </div>
    </li>
    
    <?
        if(($close)%4 == 0) {
         echo "<ul></div>";
         $didClose = true; //Maybe the carousel has less than 4 items ...
        }
    
      $open++;
      $close++;
      $active++;
    }
    if($didClose == false) echo "</div></div>"; //If has less than 4 items in the carousel close the tags.
    ?>
    
    </div><!--/.caroussel-inner -->
  4. 0

    He resuelto como :

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <?php $slider = $guest->getAllData("slider"); ?>
                <?php foreach( $slider as $slide) : ?>
                    <li data-target="#myCarousel" data-slide-to="<?=$slide['id']; ?>" class=""></li>
                <?php endforeach; ?>
            </ol>
            <div class="carousel-inner">
                <?php foreach($slider as $slide) : ?>
                    <div class="item ">
                        <img src="images/slider/<?=$slide['img']; ?>" alt="Los Angeles">
                    </div>
                <?php endforeach; ?>
            </div>
    
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    y agregar el código JS:

    $('.carousel-indicators>li:first-child').addClass('active');
    $('.carousel-inner>div:first-child').addClass('active');

Dejar respuesta

Please enter your comment!
Please enter your name here