Get all image files using codeigniter and output them as img tags. Allow them to be selected and place the filename in a hidden textbox.

gistfile1.phtml

<?php 
  // Controller Logic
  // Get a list of all images
  $this->load->helper('file');
  $images = get_filenames('./assets/file_library/activities/');

  // Remove the default
  $this->viewData['images'] = array_diff($images, array('default.png'));
?>

<div class="control-group">
  <label class="control-label ">Image </label>
  <div class="controls imagepicker">
    <input type="text" placeholder="Search..." class="livesearch"><br/><br/>
    <img src="/assets/file_library/activities/default.png" class="imageselected" id="default.png">
    <?php foreach($images as $image): ?>
      <img src="/assets/file_library/activities/<?= $image ?>" id="<?= $image ?>">
    <?php endforeach; ?>
    <input type="hidden" name="image" id="image" value="default.png">
  </div>
</div>

<script type="text/javascript">
  $(".livesearch").keyup(function () {
    var filter = $(this).val();
    $(".imagepicker img").each(function () {
      if ($(this).attr('id').search(new RegExp(filter, "i")) < 0) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  });

  $(".imagepicker img").click(function() {
    // Remove all imageselected
    $(".imagepicker img").removeClass();

    $(this).attr('class', 'imageselected');
    var name = $(this).attr('id');
    $("#image").val(name);
  });
</script>