如何使用foreach循环在自举轮播中显示图像?

时间:2019-05-03 07:36:26

标签: php mysql foreach-loop-container

我想通过foreach循环使用bootstrap轮播显示图像。

尝试使用foreach循环显示图像时我一直很困难...请注意,我的数据库功能不是问题...我只需要帮助即可重新构建循环。

<?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);
?>

真相是我现在很困惑。我只想使用foreach重组此循环...

<div id="carouselExampleIndicators" class="carousel slide mx-auto" data-ride="carousel">
 <ol class="carousel-indicators">
      <?php $i=0; foreach($photos as $photo){?>
      <?php if($i==0){ ?><li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>" class="active"><?php } ?>
       <?php if($i % 2 == 0){ ?><li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i; ?>"><?php }?>
       <?php if($i % 4 != 0){ ?></li><?php }?>
       <?php $i++; } ?>
      </li>
  </ol>
  <div class="carousel-inner">
    <?php $i=0; foreach($photos as $photo){?>
         <?php if($i==0){ ?><div class="carousel-item active"><?php } ?>
             <?php if($i % 2 == 0){ ?><div class="carousel-item"><?php }?>
          <div class="col-xs-3">
       <img src="<?php echo $photo->image_path(); ?>" class="img-thumbnail img-responsive" height="500" width="500" alt=""/>
           </div>
                <?php if($i % 4 != 0){ ?></div><?php }?>
                <?php $i++; } ?>
                 </div>
     </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>

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>