Cacher is the code snippet organizer for pro developers

// INCLUDE http://sachinchoolur.github.io/lightslider/ component

<?php
$theimages = array();
$files = glob('gallery-images/*.{jpg,png,gif}', GLOB_BRACE);
foreach($files as $file) {
$name = basename($file, ".jpg");
$name = str_replace('-', ' ', $name);
 $theimages[] = '
 <li data-thumb="'.$file.'" data-src="'.$file.'">
    <div class="box-out">
        <div class="boximg"><img src="'.$file.'" /></div>
        <div class="boxtxt">'.$name.'</div>
    </div>
 </li>
 ';
}

?>

<div class="col-md-12">
    <ul id="imageGallery">
      <?php foreach($theimages as $image) { echo $image; } ?>
    </ul>
</div>

  $(document).ready(function() {
    $('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:true,
        thumbItem:9,
        slideMargin:0,
        enableDrag: true,
        currentPagerPosition:'left',
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '#imageGallery .lslide'
            });
        }   
    });  
  });