如何修复此循环以使用引导轮播显示我的数据库中的图像

时间:2019-05-02 07:20:32

标签: php mysql bootstrap-4

我尝试使用引导轮播来显示数据库中的图像,但是循环似乎出了点问题……

<?php
  $message = "";
  if(empty($_GET['id'])) {
    $session->message("<div class='btn sm-warning'>please select an image.</div>");
    redirect_to('list_properties.php');
  } 
  $id      = $_GET['id'];
  $sql     = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
  $photos = Picture::find_by_sql($sql);
?>

从数据库中提取的数据都是正确的,但是在幻灯片中显示图像的循环显示一个图像,并且幻灯片仅在第一张和第二张幻灯片之间循环。

<div class="container">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide mx-auto" data-ride="carousel">
  <ol class="carousel-indicators">
    <?php 
     $i=0;
    if(count($photos)){
        foreach ($photos as $photo) {
            if($i==0){
                echo '<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>';
                $i++;
            }
            else
            {
                echo '<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>';
                $i++;
            }
        }
    }
   ?>
  </ol>
  <div class="carousel-inner">
   <?php
    $a=0;
    if(count($photos)){
        foreach ($photos as $photo) {
            if($a==0){
                ?>
            <div class="carousel-item active">
           <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive"  alt="<?php echo $photo->title; ?>"/>
            <?php   
                $a++;
            }else
            ?>
    </div>
           <?php
            {
                ?>
            <div class="carousel-item">
           <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" alt="<?php echo $photo->title; ?>"/>
               <?php
                $a++;
            }
            ?>
    </div>
       <?php
        }
    }
   ?>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
</div>

1 个答案:

答案 0 :(得分:0)

<?php
  $message = "";
  if(empty($_GET['id'])) {
    $session->message("<div class='btn sm-warning'>please select an image.</div>");
    redirect_to('list_properties.php');
  } 
  $id      = $_GET['id'];
  $sql     = "SELECT * FROM pictures2 WHERE photograph_id='$id';";
  $photos = Picture::find_by_sql($sql);
?>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
 <?php
$i = 0; 
 foreach($photos as $photo){
        if($i == 0){
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" class="active"></li>
<?php
 $i++;  }else{
    if($i != 0){        
?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" ></li>
<?php               
        } $i++;
    }
 }
?> 
  </ol>
  <div class="carousel-inner">
   <?php 
    $i = 0;  
    foreach($photos as $photo){
        if($i == 0){
    ?>
    <div class="carousel-item active">
    <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
    </div>
    <?php               
    $i++;   } else{
        if($i != 0){    
    ?>
    <div class="carousel-item">
    <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt="<?php echo $photo->title; ?>"/>
    </div>
        <?php                           
        } $i++;
    }  
      }
    ?>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>