【问题标题】:Pull all images from a folder and create Bootstrap carousel/slideshow从文件夹中提取所有图像并创建 Bootstrap 轮播/幻灯片
【发布时间】:2015-11-26 13:57:49
【问题描述】:

M 被这段代码卡住了,我试图将所有图像拉到一个文件夹中并将它们放在列表或 div 中,以创建 Bootstrap Carousel。

  <div id="spa_gallery" class="carousel slide" data-ride="carousel"> 
    <!-- Carousel indicators -->

    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">


<?php
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
$imagelist.= '<li class="item"><a href=""><img src="'.$image.'" /></a>      </li>';
}
?>


    <!-- Carousel controls --> 
    <a class="carousel-control left" href="#spa_gallery" data-slide="prev">        <span class="glyphicon glyphicon-chevron-left"></span> </a> 
<a class="carousel-control right" href="#spa_gallery" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
</div>
</div>

之前的代码在哪里:

<div class="carousel-inner">
  <div class="item active"> <img src="spa_gallery/01.jpg"  alt="First Slide"> 
</div>
  <div class="item"> <img src="spa_gallery/02.jpg" alt="Second Slide"> </div>
  <div class="item"> <img src="spa_gallery/03.jpg" alt="Third Slide"> </div>
  <div class="item"> <img src="spa_gallery/04.jpg" alt="Fourth Slide"> </div>
  <div class="item"> <img src="spa_gallery/05.jpg" alt="Fifth Slide"> </div>
</div>

【问题讨论】:

  • 运行代码时发生了什么?你期望发生什么?
  • 你会在某个地方回显 $imagelist 吗?

标签: javascript php jquery twitter-bootstrap-3 bootstrap-carousel


【解决方案1】:

尝试使用

<?php
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
  ?>
   <div class="item"><img src="<?php echo $image; ?>" /></div>
  <?php
}

<?php
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
  $imagelist.= '<div class="item"><img src="'.$image.'" /></div>';
}
echo $imagelist; //<<<<<
?>

对我来说,我使用了类似下一个代码的东西

        $dir_imgs   = "spa_gallery";
        $files_imgs = scandir($dir_imgs);
        foreach ($files_imgs as $key_imgs => $value_imgs){
            $php_imgs = explode(".", $value_imgs);
            $php_imgs = end($php_imgs);
            if ($php_imgs == "jpg"){    
                ?>
                <div class="item"><img src="<?php echo $dir_imgs.'/'.$value_imgs; ?>" /></div>
                <?php       
            }
        }

将活动类添加到 img

$class_active = 0;  // before foreach

<div class="item <?php  echo (($class_active == 0)? 'active' : '') ?>">

然后

$class_active = 1;

所以你的代码将是

<?php
$class_active = true;
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
  ?>
   <div class="item <?php if($class_active == true){ echo 'active' ; $class_active = false} ?>"><img src="<?php echo $dirname.$image; ?>" /></div>
  <?php
}

【讨论】:

  • 如何为任何图像添加 class="item active" 以开始幻灯片放映?
    。那么幻灯片就以这张图片开头?
  • 表示代码如下:
    .. .....
  • Bootstrap 要求第一个元素具有 class="active" 才能开始幻灯片放映
  • @luna.romania 我明白你的意思我更新了我的答案.. 但是你可以让我知道你从我的答案中使用的每个脚本,我会修改给你
  • 不工作: $class_active = 1; ?>
猜你喜欢
相关资源
最近更新 更多
热门标签