• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Galeria zdjęć

+1 głos
49 wizyt
pytanie zadane 6 dni temu w PHP przez MKolaj15 Bywalec (2,010 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 6 dni temu przez VBService Mędrzec (162,950 p.)

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

komentarz 6 dni temu przez MKolaj15 Bywalec (2,010 p.)
Raczej tak.

2 odpowiedzi

+1 głos
odpowiedź 6 dni temu przez VBService Mędrzec (162,950 p.)
wybrane 4 dni temu 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 4 dni temu przez MKolaj15 Bywalec (2,010 p.)
Przestudiowałem kod i nauczyłem się kilku nowych rzeczy. Naprawdę, niezmiernie dziękuję za pomoc.
+1 głos
odpowiedź 6 dni temu przez SzkolnyAdmin Maniak (67,660 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.

komentarz 6 dni temu przez MKolaj15 Bywalec (2,010 p.)
Nie za bardzo wiem, w którym momencie przypisać adres obrazu do zmiennej sesyjnej i jak później dzięki niej otworzyć wybrane zdjęcie.

Podobne pytania

0 głosów
1 odpowiedź 123 wizyt
pytanie zadane 26 kwietnia 2017 w Rozwój zawodowy, nauka, szkoła, praca przez Dethavel Początkujący (280 p.)
0 głosów
1 odpowiedź 279 wizyt
pytanie zadane 24 lutego 2017 w SQL, bazy danych przez kubadenko Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 301 wizyt
pytanie zadane 10 lutego 2019 w HTML i CSS przez GaryNJ Nowicjusz (240 p.)

87,942 zapytań

136,519 odpowiedzi

304,383 komentarzy

58,306 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...