使用 PHP 在引导模式中动态创建图像幻灯片

Question

<div class="modal-body">
    <?php 
    $id=$_GET['id'];
    $qry="select rel_movies from released_movies where rel_id='$id' ";
    $qryr=$con->query($qry);
    while($rr=$qryr->fetch_assoc()){
    $film=$rr['rel_movies'];
        $q="select * from gallery where category='$film'";
        $qr=$con->query($q);
        while($r=$qr->fetch_assoc()){ 
    ?>
    <ol class="carousel-indicators">
        <li data-target="#lightbox" data-slide-to="0" class="active"></li>
        <li data-target="#lightbox" data-slide-to="1"></li>
        <li data-target="#lightbox" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="../AbaamAdmin/uploads/<?php echo $r['images'];?>" width="900px" height="500px" >
        </div> <!-- /.item active-->
    </div> <!-- /.carousel-inner -->
    <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#lightbox" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    <?php }} ?>
</div><!-- /.modal-body -->

我正在尝试将引导模式内的数据库中的图像显示为幻灯片。但是执行上述代码后，我得到的是，所有图像都出现在模态框内，但是左右图标都不起作用，而是用 y 滚动查看图像。

我无法找出错误。

Answer 1

@Ashwini Agarwal 解决方案是部分的，要同时显示图像指示器和图像，因为不能两次运行 while 循环，所以不能这样做，所以工作解决方案是在循环之前创建数组，将获取的数据加载到数组，然后对indicators 使用foreach 函数并显示images 还使用counter 处理active 类

PHP 代码

<?php 
$id=$_GET['id'];
$qry="select rel_movies from released_movies where rel_id='$id' ";
$qryr=$con->query($qry);
while($rr=$qryr->fetch_assoc()){
    $film=$rr['rel_movies'];
    $q="select * from gallery where category='$film'";
    $qr=$con->query($q);
    $rows = array(); //Declare rows as arrays before loop
    while($r=$qr->fetch_assoc()){ //Run Loop
        $rows[] = $r; //Load Data in arrays
    } //close Loop
} //close First Loop, Side Note, You don't need This Loop
?>

现在 Modal Body 内的 Carousel 将如下所示（用 cmets 解释以了解其工作原理）

<div class="modal-body">
<div id="lightbox" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
            <?php
                $i = 1; //Counter
                foreach ($rows as $r): //Foreach
                $ol_class = ($i == 1) ? 'active' : ''; //Set class active for only indicator which belongs to respective Image
            ?>
             //Here I add the counter to data-slide attribute and add class to indicator
            <li data-target="#lightbox" data-slide-to="<?php echo $i;?>"  class="<?php echo $ol_class; ?>"></li>
            <?php $i++; ?>
            <?php endforeach; ?> //Close Foreach
    </ol>
    <div class="carousel-inner">
            <?php
            $i = 1; //Counter
            foreach ($rows as $r): //Foreach
            $item_class = ($i == 1) ? 'item active' : 'item'; //Set class active for image which is showing
            ?>              
            <div class="<?php echo $item_class; ?>"> // Define Active Class Here
                <img src="../AbaamAdmin/uploads/<?php echo $r['images'];?>" width="900px" height="500px" >
            </div>
            <?php $i++; ?>
            <?php endforeach; ?> // Close Foreach
    </div>
    <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#lightbox" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>

Answer 2

将carousel 放在循环之外。

<ol class="carousel-indicators">
    <li data-target="#lightbox" data-slide-to="0" class="active"></li>
    <li data-target="#lightbox" data-slide-to="1"></li>
    <li data-target="#lightbox" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">

<?php $counter = 1; ?>
<?php while($r=$qr->fetch_assoc()) { ?>

     <div class="item <?php echo ($counter++ == 1) ? 'active' : '' ?>">
          <img src="../AbaamAdmin/uploads/<?php echo $r['images'];?>" width="900px" height="500px" >
     </div> <!-- /.item active-->

<?php } ?>

</div> <!-- /.carousel-inner -->

<a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>