Load More Button With PHP DirectoryIterator? - php

Question

I have a number of "image gallery" style pages within my WordPress site. I'm trying to find out whether or not it's possible, using the method that I'm using, to create a 'Load More' button so that only 15 (for example, can be whatever) thumbnails load at a time.
To gather the files that should be displayed I'm using PHP's DirectoryIterator. I use the same custom function for every page, but the function itself is a bit long and messy. Essentially, I need to be able to just drop files into the appropriate directory and have them automatically detected and have the thumbnail shown with a link to the full-size image.
I already have this set up and working. Half of the function also checks for any sub-directories and repeats the process for those so that I can have any number of "galleries", each with any number of images, on a single page simply by creating directories and uploading files.
It's rather long, but for reference I feel like I need to paste the full function when asking this question so that people know what I'm working with. The type of content I'm working with is video game screenshots.
function display_screenshots() {
global $post;
$post_data = get_post($post->post_parent);
$parent_slug = $post_data->post_name;
$img_directory = '/wp-content/uploads/screenshots/' . $parent_slug . '/';
$thumb_directory = '/wp-content/uploads/screenshots/' . $parent_slug . '/thumb/';
$img_list_directory = getcwd() . '/wp-content/uploads/screenshots/' . $parent_slug . '/';
if(is_dir($img_list_directory)) {
$found_shots = array();
echo '<div class="screenshot-thumbs-outer">';
echo '<div class="screenshot-thumbs-inner">';
foreach(new DirectoryIterator($img_list_directory) as $file) {
if ($file->isDot()) continue;
$fileName = $file->getFilename();
$filetypes = array(
"png",
"PNG"
);
$filetype = pathinfo($file, PATHINFO_EXTENSION);
if (in_array(strtolower($filetype), $filetypes )) {
$found_shots[] = array(
"fileName" => $fileName
);
}
}
asort($found_shots);
foreach($found_shots as $file) {
$filename = $file['fileName'];
$thumbname = substr($filename, 0, -3).'jpg';
echo '<a href="#" data-featherlight="'.$img_directory.$filename.'" rel="nofollow">';
echo '<img src="'.$thumb_directory.$thumbname.'"/>';
echo '</a>';
}
echo '</div>';
echo '</div>';
}
if(is_dir($img_list_directory)) {
foreach(new DirectoryIterator($img_list_directory) as $dir) {
if($dir->isDir() && $dir != '.' && $dir != '..' && $dir != 'thumb') {
$dir_h2 = substr($post->post_title, 0, -12) . ' - ' . str_replace(array('Hd ', ' Hd ', ' Of ', ' The ', ' A ', ' To '), array('HD ', ' HD ', ' of ', ' the ', ' a ', ' to '), ucwords(str_replace("-", " ", $dir))) . ' Screenshots';
$img_directory = '/wp-content/uploads/screenshots/' . $parent_slug . '/' . $dir . '/';
$thumb_directory = '/wp-content/uploads/screenshots/' . $parent_slug . '/' . $dir . '/thumb/';
$img_list_directory = getcwd() . '/wp-content/uploads/screenshots/' . $parent_slug . '/' . $dir . '/';
$found_shots = array();
echo '<hr />';
echo '<h2>' . $dir_h2 . '</h2>';
echo '<div class="screenshot-thumbs-outer">';
echo '<div class="screenshot-thumbs-inner">';
foreach(new DirectoryIterator($img_list_directory) as $file) {
if ($file->isDot()) continue;
$fileName = $file->getFilename();
$filetypes = array(
"png",
"PNG"
);
$filetype = pathinfo($file, PATHINFO_EXTENSION);
if (in_array(strtolower($filetype), $filetypes )) {
$found_shots[] = array(
"fileName" => $fileName
);
}
}
asort($found_shots);
foreach($found_shots as $file) {
$filename = $file['fileName'];
$thumbname = substr($filename, 0, -3).'jpg';
echo '<a href="#" data-featherlight="'.$img_directory.$filename.'" rel="nofollow">';
echo '<img src="'.$thumb_directory.$thumbname.'"/>';
echo '</a>';
}
echo '</div>';
echo '</div>';
}
}
}
}
Again, this function is working as intended, I just want to find some way to add 'Load More' functionality so that if there are 150 images, only 15 will load at a time. I'll also need to duplicate the code for the 'Load More' button in the second half of the function so that it's happening for any additional galleries on the page as well.
I realize that this is a lot for someone else to dive into, but I've put a lot of time into combing answers on this site as well as searching Google and I haven't been able to find a solution that's really relevant to the function I'm using to gather/display these images.
Any help will definitely be appreciated.
Thanks!