Galeria zdjęć

pytanie zadane 12 maja 2022 w PHP przez MKolaj15 Bywalec (2,250 p.)

Witam, mam do napisania stronę, która będzie czymś na wzór galerii zdjęć przechowywanych w odpowiednim folderze. Strona główna ma wyświetlać miniatury 4 pierwszych zdjęć oraz umożliwiać stronicowanie (przyciski do wyświetlenia kolejnych lub poprzednich 4 miniatur zdjęć). Po kliknięciu, na któryś z obrazków ma otworzyć się podstrona, która będzie wyświetlała wybrane zdjęcie (nazwa, rozmiar, rozszerzenie) oraz będzie zawierać przycisk powrót.

Trochę się pogubiłem i nie do końca wiem jak sprawić, aby po kliknięciu na jakiś obrazek wyświetlała się ta strona. Nie do końca też wiem co zrobić, żeby odpowiednie przyciski wyświetlały kolejne lub poprzednie 4 miniatury.

Oto mój kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <title>Galeria obrazów</title>
</head>
<body>
<?php
    $imgDir = "images";

    if(isSet($_GET['imgid'])){
        $imgId = intval($_GET['imgid']);
    }
    else{
        $imgId = 0;
    }

    $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]);
        }
    }

    sort($dir);

    $count = count($dir);

    if($count < 1){
        echo "<p style=\"text-align:center\">Brak obrazów w galerii.</p>";
        echo "</body></html>";
        exit();
    }

?>
<div>
    <div id='obraz' style='text-align: center; float: left'>
        <?php
            for($i = 0; $i < 4; $i++) {
                $imgId = $i;
                $imgName = $dir["$imgId"];
                echo "<a href=\"Zad5.8.2.php?imgid=$imgId\" target=\"_self\"><img style='height: 300px; width: 25%; margin: 70px' src=\"$imgDir\\$imgName\" alt=\"$imgName\"/></a>";
            }
        ?>
    </div>
    <div id='nawigacja' style='text-align: center; padding: 3%'>
        <?php
        echo "<a href=\"#\">Poprzednie zdjęcia</a> ";
        echo "<a href=\"#\">Następne zdjęcia</a> ";
        ?>
    </div>
</div>
</body>
</html>

Jeżeli ktoś byłby w stanie mi z tym pomóc to byłbym bardzo wdzięczny i z góry dziękuję.

komentarz 13 maja 2022 przez VBService Ekspert (233,350 p.)

Możesz w zadaniu używać $_SESSION ?

komentarz 13 maja 2022 przez MKolaj15 Bywalec (2,250 p.)

Raczej tak.

2 odpowiedzi

odpowiedź 13 maja 2022 przez VBService Ekspert (233,350 p.)
wybrane 15 maja 2022 przez MKolaj15

Najlepsza

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>

1	komentarz 15 maja 2022 przez MKolaj15 Bywalec (2,250 p.) Przestudiowałem kod i nauczyłem się kilku nowych rzeczy. Naprawdę, niezmiernie dziękuję za pomoc.

odpowiedź 13 maja 2022 przez SzkolnyAdmin Szeryf (81,020 p.)

"jak sprawić, aby po kliknięciu na jakiś obrazek wyświetlała się ta strona" - obraz musi być hiperłączem do tej strony (statyczna) lub też przesyłać np. metodą GET albo przez zmienną sesyjną (jak radził VBService) adres obrazu. Pomyśl nad zastosowaniem AJAX-a do konstrukcji aplikacji.