使用PHP动态创建引导模态中的图像幻灯片 [英] create a slideshow of images inside bootstrap modal dynamically using PHP

问题描述

<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滚动查看了这些图像.

I am trying to display images from database inside bootstrap modal as a slideshow. But after executed the above code, what I got is, all images appeared inside the modal, but both left and right icons are not working instead of that images are viewed with a y scroll.

我无法弄清楚错误.

推荐答案

@Ashwini Agarwal解决方案是部分解决方案，无法同时显示图像指示符和图像，因为不能两次运行while循环，因此可行的解决方案是在循环之前创建数组，将获取的数据加载到数组中，然后对indicators使用foreach函数，并显示images还要使用counter

@Ashwini Agarwal solution is partial and to show both image indicators and images it cann't be done like that because can't run the while loop twice so the working solution will be to create arrays before loop, load fetched data into arrays and then use foreach function for both indicators and to show images also handle the active class with 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
?>

现在，模态主体中的旋转木马会看起来像这样(用注释进行了解释，以了解其工作原理)

Now the Carousel inside Modal Body will look like this (explained with comments to understand how this is working)

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

这篇关于使用PHP动态创建引导模态中的图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！