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 -->

我试图以幻灯片形式显示bootstrap模式中的数据库中的图像。但是在执行了上面的代码之后，我得到的是，所有图像都出现在模态中，但左右图标都不起作用，而不是用y滚动查看图像。

我无法弄清楚错误。

Answer 1

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

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看起来像这样（用注释解释，以了解它是如何工作的）

<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>

使用PHP动态创建bootstrap模式中的图像幻灯片

2 个答案: