时间戳

首页 > 解决方案 > 使用 Bootstrap 4 flexbox 的 PHP 动态图片库

php - 使用 Bootstrap 4 flexbox 的 PHP 动态图片库

问题描述

如何在 foreach 循环中动态低于 html？我有一个图像数组，每个循环可以回显一个图像，但我不确定如何每个循环循环两个图像？

  <div class="d-flex flex-row">
  <div class="d-flex flex-column">
     <img src="1" class="img-fluid">
     <img src="2" class="img-fluid">
  </div>
  <div class="d-flex flex-column">
     <img src="3" class="img-fluid">
     <img src="4" class="img-fluid">
  </div>
  <div class="d-flex flex-column">
     <img src="5" class="img-fluid">
     <img src="6" class="img-fluid">
  </div>
  <div class="d-flex flex-column">
     <img src="7" class="img-fluid">
     <img src="8" class="img-fluid">
  </div>
 </div>

这是我试过的。

      <?php $images = get_field('image_gallery'); ?> 
       <?php if($images): ?>
        <div class="d-flex flex-row">
           <?php foreach( $images as $image ): ?> 
             <div class="d-flex flex-column">


                 <a data-fancybox="gallery" href="<?php echo $image['url']; ?>"> 
                    <img src="<?php echo $image['url']; ?> " class='img-fluid' alt=""> 
                 </a> 
                <!-- This duplicates the image and need some break or continue statment -->
                  <a data-fancybox="gallery" href="<?php echo $image['url']; ?>"> 
                    <img src="<?php echo $image['url']; ?>" class='img-fluid' alt=""> 
                 </a>


           </div>           
          <?php endforeach; ?> 
          </div>
        <?php endif; ?>

标签： phptwitter-bootstrapflexboxgallery

解决方案

使用以下代码。可能对你有帮助

<?php $images = get_field('image_gallery'); ?> 
       <?php if($images): ?>
        <div class="d-flex flex-row">
           <?php for ($i=0; $i < count($images); $i++) { ?> 
             <div class="d-flex flex-column">


                 <a data-fancybox="gallery" href="<?php echo $image[$i]['url']; ?>"> 
                    <img src="<?php echo $image[$i]['url']; ?> " class='img-fluid' alt=""> 
                 </a> 
                <!-- This duplicates the image and need some break or continue statment -->
                  <a data-fancybox="gallery" href="<?php echo $image[$i+1]['url']; ?>"> 
                    <img src="<?php echo $image[$i+1]['url']; ?>" class='img-fluid' alt=""> 
                 </a>


           </div>           
          <?php 
                    $i++;
                }
           ?> 
          </div>
        <?php endif; ?>

推荐阅读