How to auto-fill images from a directory in html for Flexslider2?

Question

I have been searching all day and I am pretty stumped. I've tried everything I searched but have had no success.

This is my problem..

<div id="slider" class="flexslider">
      <ul class="slides">
      <li><img src="photos/mini-01.jpg"/>
      <li><img src="photos/mini-02.jpg"/>
      <li><img src="photos/mini-03.jpg"/>
      <li><img src="photos/mini-04.jpg"/>
      </ul>
</div>
<div id="carousel" class="flexslider">
      <ul class="slides">
      <li><img src="photos/mini-01.jpg"/>
      <li><img src="photos/mini-02.jpg"/>
      <li><img src="photos/mini-03.jpg"/>
      <li><img src="photos/mini-04.jpg"/>
      </ul>
</div>

What I want to do is have it auto create the lines for my images based on what's in the "photos" folder. I will be using this template on many occasions and do not want to have to manually input the photos every single time I do it. Talk about labour intensive.

Any help would be greatly appreciated.

Answer 1

You can do this with PHP, just use this function at the top of your page.

<?php
function images($dir) {
$files1 = scandir($dir);
foreach ($files1 as $x=>$value)
{
    if ($value == "." || $value == ".."){
        unset($files1[$x]);
    }
}
foreach ($files1 as $x=>$value)
{

    echo "<li><img src=\"photos/$value\"></li>";
}
}
?>

Then when you want to use it, just call it with your image directory name.

<ul>
<?php images (Your photos directory Name here);?>
</ul>