Skip to content

Instantly share code, notes, and snippets.

@timw4mail

timw4mail/index.php

Last active Nov 12, 2020
Embed
What would you like to do?
Image Viewer
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment