timw4mail/index.php

## index.php
<!DOCTYPE html>
<html>
<head>
    <title>Image Viewer</title>
    <style>
        * {margin: 0}
        img {
            max-width: 100%;
            <?php if (empty($_GET['zoom'])): ?>
            max-height: 900px;
            <?php endif ?>
        }

        a.img-link {
            display: block;
            width: 100%;
        }

        body {
            display: flex;
            margin: auto;
            height: 100%;
        }

        main {
            margin: auto;
        }

        #cg_nav1 {text-align: center;}

        #link_nav {
            display:flex;
            flex-wrap: wrap;
            flex-direction:column;
            align-content: space-between;
            justify-content: flex-start;
            margin: auto;
            max-width: 500px;
        }

        #link_nav > * {
            margin: 0;
            text-align: left;
        }
    </style>
</head>
<body>
<main>
<?php

function getImages(string $dir = __DIR__): array
{
	$rawList = scandir($dir, SCANDIR_SORT_DESCENDING);
	$validExts = ['gif', 'jpg', 'jpeg', 'png', 'webp', 'tif', 'tiff', 'bmp'];
	$files = [];

	foreach ($rawList as $rawFile)
	{
		$parts = explode('.', $rawFile);
		$ext = strtolower(array_pop($parts));

		if (in_array($ext, $validExts))
		{
			$files[] = $rawFile;
		}
	}

	return array_values($files);
}

function getIndexByFile(string $file, array $files): ?int
{
    $maybeIndex = array_search($file, $files, TRUE);

    return ($maybeIndex !== FALSE)
        ? $maybeIndex
        : NULL;
}

$images = getImages();
$count = count($images);
sort($images);
reset($images);

$file = $_GET['file'] ?? NULL;
if (( ! empty($file)) && getIndexByFile((string)$file, $images) === NULL)
{
    echo "
        <h1>Invalid File</h1>
</main>
</body>
</html>"; die();
}

$current = $file ?? $images[0];
$index = getIndexByFile($current, $images);
$next = $index + 1;
$back = $index - 1;
if ($back < 0)
{
    $back = 0;
}
if ($next > $count)
{
	$next = $count - 1;
}
?>

<?php if ($count > 1): ?>
    <p id="cg_nav1">
        <?php if (empty($_GET['zoom'])): ?>
        [<a href="?file=<?= $current ?>&zoom=1">Full Zoom</a>]<br />
        <?php endif ?>

		<?php if ($index > 0): ?>
            <a href="?file=<?= $images[0] ?>" id="cg_first">First</a>
            <a href="?file=<?= $images[$back] ?>" id="cg_back">&laquo; Back</a>
		<?php else: ?>
            <span id="cg_first">First</span>
            <span id="cg_back">&laquo; Back</span>
		<?php endif ?>

		<?php if ($index < ($count - 1)): ?>
            <a href="?file=<?= $images[$next] ?>" id="cg_next">Next &raquo;</a>
            <a href="?file=<?= $images[$count - 1] ?>" id="cg_last">Last</a>
		<?php else: ?>
            <span id="cg_next">Next &raquo;</span>
            <span id="cg_last">Last</span>
		<?php endif ?>
    </p>
<?php endif ?>


<?php if ((int)$index < ($count - 1)): ?>
    <a class="img-link" href="?file=<?= $images[$next] ?>"><img src="<?= $current ?>" alt="Next"/></a>
<?php else: ?>
    <img src="<?= $current ?>" alt="End" />
<?php endif; ?>


<?php if ($count > 1): ?>
    <div id="link_nav">
        <?php foreach ($images as $file): ?>
            <?php if ($file === $current): ?>
                <strong><?= $file ?></strong>
            <?php else: ?>
                <a href="?file=<?= $file ?>"><?= $file ?></a>
            <?php endif ?>
        <?php endforeach ?>
    </div>
<?php endif ?>
</main>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Image Viewer</title>
	<style>
	* {margin: 0}
	img {
	max-width: 100%;
	<?php if (empty($_GET['zoom'])): ?>
	max-height: 900px;
	<?php endif ?>
	}

	a.img-link {
	display: block;
	width: 100%;
	}

	body {
	display: flex;
	margin: auto;
	height: 100%;
	}

	main {
	margin: auto;
	}

	#cg_nav1 {text-align: center;}

	#link_nav {
	display:flex;
	flex-wrap: wrap;
	flex-direction:column;
	align-content: space-between;
	justify-content: flex-start;
	margin: auto;
	max-width: 500px;
	}

	#link_nav > * {
	margin: 0;
	text-align: left;
	}
	</style>
	</head>
	<body>
	<main>
	<?php

	function getImages(string $dir = __DIR__): array
	{
	$rawList = scandir($dir, SCANDIR_SORT_DESCENDING);
	$validExts = ['gif', 'jpg', 'jpeg', 'png', 'webp', 'tif', 'tiff', 'bmp'];
	$files = [];

	foreach ($rawList as $rawFile)
	{
	$parts = explode('.', $rawFile);
	$ext = strtolower(array_pop($parts));

	if (in_array($ext, $validExts))
	{
	$files[] = $rawFile;
	}
	}

	return array_values($files);
	}

	function getIndexByFile(string $file, array $files): ?int
	{
	$maybeIndex = array_search($file, $files, TRUE);

	return ($maybeIndex !== FALSE)
	? $maybeIndex
	: NULL;
	}

	$images = getImages();
	$count = count($images);
	sort($images);
	reset($images);

	$file = $_GET['file'] ?? NULL;
	if (( ! empty($file)) && getIndexByFile((string)$file, $images) === NULL)
	{
	echo "
	<h1>Invalid File</h1>
	</main>
	</body>
	</html>"; die();
	}

	$current = $file ?? $images[0];
	$index = getIndexByFile($current, $images);
	$next = $index + 1;
	$back = $index - 1;
	if ($back < 0)
	{
	$back = 0;
	}
	if ($next > $count)
	{
	$next = $count - 1;
	}
	?>

	<?php if ($count > 1): ?>
	<p id="cg_nav1">
	<?php if (empty($_GET['zoom'])): ?>
	[<a href="?file=<?= $current ?>&zoom=1">Full Zoom</a>]<br />
	<?php endif ?>

	<?php if ($index > 0): ?>
	<a href="?file=<?= $images[0] ?>" id="cg_first">First</a>
	<a href="?file=<?= $images[$back] ?>" id="cg_back">« Back</a>
	<?php else: ?>
	<span id="cg_first">First</span>
	<span id="cg_back">« Back</span>
	<?php endif ?>

	<?php if ($index < ($count - 1)): ?>
	<a href="?file=<?= $images[$next] ?>" id="cg_next">Next »</a>
	<a href="?file=<?= $images[$count - 1] ?>" id="cg_last">Last</a>
	<?php else: ?>
	<span id="cg_next">Next »</span>
	<span id="cg_last">Last</span>
	<?php endif ?>
	</p>
	<?php endif ?>


	<?php if ((int)$index < ($count - 1)): ?>
	<a class="img-link" href="?file=<?= $images[$next] ?>"><img src="<?= $current ?>" alt="Next"/></a>
	<?php else: ?>
	<img src="<?= $current ?>" alt="End" />
	<?php endif; ?>


	<?php if ($count > 1): ?>
	<div id="link_nav">
	<?php foreach ($images as $file): ?>
	<?php if ($file === $current): ?>
	<strong><?= $file ?></strong>
	<?php else: ?>
	<a href="?file=<?= $file ?>"><?= $file ?></a>
	<?php endif ?>
	<?php endforeach ?>
	</div>
	<?php endif ?>
	</main>
	</body>
	</html>