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

Posted 2023-02-24

【中文标题】使用 PHP 在引导模式中动态创建图像幻灯片

【英文标题】：create a slideshow of images inside bootstrap modal dynamically using PHP

【发布时间】：2016-02-07 10:33:56

【问题描述】：

<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'];?>"   >
        </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 滚动查看图像。

我无法找出错误。

【参考方案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'];?>"   >
            </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>

【讨论】：

欢迎您，是的，您可以使用相同的代码来显示视频，如果遇到任何问题，我们将在这里解决。快乐编码

谢谢@Shehary，但现在，我用下面的代码代替了 但是，我得到的只是一个模态弹出窗口禁止访问，但有时，当我使用左右箭头时，会出现所需的视频。可能是什么问题？

如果您只想显示视频，请尝试删除类fade并删除<img src="../AbaamAdmin/upload...">，还有一些其他已知问题已在此答案***.com/questions/18622508/…中解决

我创建了这个小提琴，似乎它在不删除类 fade jsfiddle.net/g7pkd7zz/1 的情况下工作，但还有其他问题，如果光标从视频上移开，滑动开始并显示下一个视频，如果视频播放并移动到下一个视频并播放它然后最后一个视频不会自动停止，简单来说两个视频都会播放这也很烦人所以我认为你需要处理视频自动播放的自定义脚本，如果播放新视频则停止模态关闭时停止视频。

让我们continue this discussion in chat.

【参考方案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'];?>"   >
     </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>

【讨论】：

不为所有滑块设置活动类，为第一张幻灯片设置条件 " >

@ahwini agarwal：通过这样做，左右图标起作用了，但是如果数据库中有 2 个图像，那么它们都显示为一个在另一个下方的单个图像。

@Rose.. 删除 active 类。

不删除，只放第一张幻灯片

First 表示第一个元素，如“” 放置一个条件，以便活动类仅适用于第一个 div。您可以使用任何计数，例如声明 $i=0 ，while 循环外和 $++ 循环内并添加条件 ">