Question

我正在尝试使用引导网格系统在页面上显示图像，其中的名称是通过从数据库中获取它们来动态创建的。例如，我有这个数据库，我想在每个图像的src名称中使用imageID。有没有更简洁的方法来做到这一点，而无需为每个图像手动添加新的div等？

用于获取图片ID的PHP代码：

<?php
//dynamically render images

include "../storescripts/connect-mysql.php";
$sql = mysql_query("SELECT * FROM imageGallery ORDER BY dateAdded ASC");
$images = array();
$imageCount = mysql_num_rows($sql); //Count the amount of products
if($imageCount > 0){
    while($row = mysql_fetch_array($sql)){
        $image = $row['imageID'];
        $images[] = $image;
}

}else{
    $image_gallery = "<h2>You have no images in the database</h2>";
}
?>

我的用于显示图片的HTML：

<div class="col-md-12">
                <div class="col-md-3 galleryImg">
                    <a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[0] ?>.png" alt="Jedi Cycle Sport Gallery Image"></a>
                </div>
                <div class="col-md-3 galleryImg">
                    <a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[1] ?>.png" alt="Jedi Cycle Sport Gallery Image"></a>
                </div>
                <div class="col-md-3 galleryImg">
                    <a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[2] ?>.png" alt="Jedi Cycle Sport Gallery Image"></a>
                </div>
                <div class="col-md-3 galleryImg">
                    <a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[3] ?>.png" alt="Jedi Cycle Sport Gallery Image"></a>
                </div>
            </div>

请参阅图像源，了解我如何使用PHP。

Answer 1

因为$images数组中有图像可用。所以在html div中创建一个foreach循环。

<div class="col-md-12">
    <?php foreach ($images as $image): ?>
        <div class="col-md-3 galleryImg">
            <a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image; ?>.png" alt="Jedi Cycle Sport Gallery Image"></a>
        </div>
    <?php endforeach; ?>
</div>

<强>更新

如果你想在父div中只重复四个div，那就是这个。

<?php 

$i = 0;
foreach ($images as $image):
    if ($i % 4 == 0) {
        echo '<div class="col-md-12">';
    }
    echo '<div class="col-md-3 galleryImg">';
    echo '<a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/' . $image .'" alt="Jedi Cycle Sport Gallery Image"></a>';
    echo '</div><!-- outputs child div -->';


    $i++;

    if ($i % 4 == 0) {
        echo '</div> <!-- outputs parent div -->';
    }

endforeach;

if ($i % 4 != 0) {
    echo '</div> <!-- outputs parent div-->';
}

Answer 2

只需使用foreach即可。使用以下代码

<div class="col-md-12">
    <?php foreach($images as $image) {?>
          <div class="col-md-3 galleryImg">
               <a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image ?>.png" alt="Jedi Cycle Sport Gallery Image"></a>
          </div>
         <?php } ?>
</div>

Answer 3

您可以简单地使用foreach循环，而不是手动添加 div ：

<div class="col-md-12">
    <?php
        foreach($images as $image){
            ?>
            <div class="col-md-3 galleryImg">
                <a href="#myModal" role="button" data-toggle="modal"><img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image; ?>.png" alt="Jedi Cycle Sport Gallery Image"></a>
            </div>
            <?php
        }
    ?>
</div>

使用Dynamic with PHP的HTML图像库

3 个答案: