Last active
November 12, 2020 02:13
-
-
Save timw4mail/708164be3bcb10880039aa997b7915fd to your computer and use it in GitHub Desktop.
Image Viewer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment