Na początek, polecam Tobie używanie funkcji glob
zamiast
$dir = scandir($imgDir);
foreach ($dir as $key => $val) {
if (!is_file("$imgDir/$val") || (exif_imagetype("$imgDir/$val") != IMAGETYPE_JPEG && exif_imagetype("$imgDir/$val") != IMAGETYPE_PNG && exif_imagetype("$imgDir/$val") != IMAGETYPE_BMP) || filesize("$imgDir/$val") > 2000000){
unset($dir[$key]);
}
}
define('IMAGE_FOLDER', 'images');
// Pobieramy wszystkie pliki tylko z roszerzeniem *.jpg, *.png, *.bmp
// z folderu gallery i tworzymy tablicę
$filter = IMAGE_FOLDER.'/*.jpg,'
. IMAGE_FOLDER.'/*.png,'
. IMAGE_FOLDER.'/*.bmp';
$images = array_filter(glob('{'.$filter.'}', GLOB_BRACE), 'is_file');
jako
będzie zawierać przycisk powrót.
<a href="javascript:history.back();">Powrót</a>
propozycja całość
<?php
define('IMAGE_OFFSET', 4);
define('IMAGE_FOLDER', 'images');
// Pobieramy wszystkie pliki tylko z roszerzeniem *.jpg, *.png, *.bmp
// z folderu gallery i tworzymy tablicę
$filter = IMAGE_FOLDER.'/*.jpg,'
. IMAGE_FOLDER.'/*.png,'
. IMAGE_FOLDER.'/*.bmp';
$images = array_filter(glob('{'.$filter.'}', GLOB_BRACE), 'is_file');
// var_dump($images); // dla demonstracji
$page = $_GET['page'] ?? 0;
?>
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8" />
<title>Galeria obrazów</title>
<style>
.container {
width: 1000px;
margin: 0 auto;
}
.no-images {
text-align: center;
color: orangered;
font: 700 1.1em/1 arial;
}
.show-image, p {
text-align: center;
}
.gallery {
float: left
}
.gallery img {
width: 200px;
height: 250px;
padding: 0;
margin: 1em;
}
.gallery img[src=""] {
/* Hide image if src is empty - https://stackoverflow.com/questions/15922344/hide-image-if-src-is-empty */
display: none;
}
.navigation {
text-align: center;
padding: 1em;
clear: left;
}
.navigation a {
margin: 0 1em;
}
</style>
</head>
<body>
<div class="container">
<?php if (count($images ?? null) < 1): ?>
<p class="no-images">Brak obrazów w galerii.</p>
<?php elseif (isset($_GET['imgid'])):
if (isset($images[$_GET['imgid']])): ?>
<p class="show-image">
<img src="<?php echo $images[$_GET['imgid']]; ?>"
alt="<?php echo basename($images[$_GET['imgid']]); ?>" />
</p>
<p>
<a href="javascript:history.back();">Powrót</a>
</p>
<?php endif; ?>
<?php else: ?>
<div>
<div class="gallery">
<?php
$range_left = ($page == 0)? 0 : $page * IMAGE_OFFSET;
$range_right = ($page * IMAGE_OFFSET) + IMAGE_OFFSET;
for ($i=$range_left; $i<$range_right; $i++) {
echo '<a href="Zad5.8.2.php?imgid='.$i.'" target="_self">'
.'<img src="'.($images[$i] ?? '').'" alt="'.basename($images[$i] ?? ' ').'" />'
.'</a>';
}
?>
</div>
<div class="navigation">
<a href="?page=<?php echo (($page - 1) < 0)? 0 : $page - 1; ?>">Poprzednie zdjęcia</a>
<a href="?page=<?php echo (($page + 1) > count($images) / IMAGE_OFFSET)? $page : $page + 1; ?>">Następne zdjęcia</a>
</div>
</div>
<?php endif; ?>
</div><!-- class="container" -->
</body>
</html>