[부트스트랩] 이미지 파일명 자동 읽어오는 Carousel

Web 프로그램/이미지 다루기 2017. 11. 27. 19:11

728x90

Bootstrap 메인 화면을 Layout 할 때 Carousel (이미지 회전 화면) 기능을 쉽게 제공한다.

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h 는 하나의 파일로 Carousel 을 제공하는 예제다.

그런데 직접 파일명을 갯수만큼 적어주는 방법이다.

그래서 지정한 폴더의 파일명을 자동으로 읽어서 화면에 보여주도록 코드를 보완했다.

보완 전 코드

<div id="myCarousel" class="carousel slide" data-ride="carousel">
   
   <ol class="carousel-indicators">
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
       <li data-target="#myCarousel" data-slide-to="1"></li>
       <li data-target="#myCarousel" data-slide-to="2"></li>
       <li data-target="#myCarousel" data-slide-to="3"></li>
   </ol>

   
   <div class="carousel-inner">
       <div class="item active">
           <img src="<?php echo $g['path_image']?>carousel/01.jpg" style="width:100%;">
       </div>

       <div class="item">
           <img src="<?php echo $g['path_image']?>carousel/02.jpg" style="width:100%;">
       </div>

       <div class="item">
           <img src="<?php echo $g['path_image']?>carousel/03.jpg" style="width:100%;">
       </div>

       <div class="item">
           <img src="<?php echo $g['path_image']?>carousel/04.jpg" style="width:100%;">
       </div>
   </div>

   
   <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
   <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div>

보완 후 코드

<?php
$path = $g['path_image'] . 'carousel';
$R = getFileNames($path); // 오픈하고자 하는 폴더
function getFileNames($directory) {
    $valid_formats = array("jpg", "png", "gif");// 그림 확장자 지정
    $results = array();
    $handler = opendir($directory);
    while ($file = readdir($handler)) {
        if ($file === "." || $file === "..") continue; // file명이 ".", ".." 이면 무시함
        $getExt = pathinfo($file, PATHINFO_EXTENSION); // 파일의 확장자를 구함

        if (!empty($getExt)) {
            if (in_array($getExt, $valid_formats)) {
                $results[] = $file;
            }
        }
    }
    closedir($handler);
    return $results;
}
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
   
   <ol class="carousel-indicators">
       <?php
        for ($i = 0; $i < count($R); $i++) {
            if ($i == 0){
                echo '<li data-target="#myCarousel" data-slide-to="$i" class="active"></li>';
            } else {
                echo '<li data-target="#myCarousel" data-slide-to="$i"></li>';
            }
        }
       ?>
   </ol>

   
   <div class="carousel-inner">
       <?php
        foreach($R as $key=>$value){
            if($key == 0){
                echo '<div class="item active">';
            } else {
                echo '<div class="item">';
            }
            echo '<img src="'.$g['path_image'].'carousel/'.$value.'" style="width:100%;">';
            echo '</div>';
        }
       ?>
   </div>

   
   <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
   <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div>