PHP Project (Simple) – Dynamic Photo Gallery

This project shows you how to create a Picture Gallery App that is dynamically based off of the pictures in a folder.

Previous Classes in Series:

PHP Project (Simple) – Dynamic Photo Gallery Stream

Prerequisites:

Basic LAMP, or Web Server Administration
- Verify pictures and folder have READ permission for OTHER
Basic PHP
Basic HTML
Basic CSS

Glob() Function:

$_GET

Allows you to send Variable Names and Values through a hyperlink
https://www.php.net/manual/en/reserved.variables.get.php
https://www.w3schools.com/php/php_superglobals_get.asp

LAMP Server

Create a “pics” directory in the Public Web Directory (/var/www/html)
Verify pictures and folder have at least a – – r permission.

index.php

<html>
<head>
<link rel='stylesheet' href='picStyle.css' />
</head>
<body>

<div class="galleryDiv">

<?php
$filelist = glob("./pics/*");

foreach($filelist as $filename){
	echo "<a href='galleryScript.php?picture=".$filename."'><img class='galleryPic' src='".$filename."'></a>";
}
?>

</div>
</body>
</html>

galleryScript.php

<html>
<head>
<link rel="stylesheet" href="picStyle.css" />

</head>
<body>

<?php

$image = $_GET['picture'];

echo "<img class='bigPic' src='".$image."'>";

?>

<h1 style="text-align:center"><a href="./index.php">Gallery</a></h1>
</body>
</html>

picStyle.css

.galleryPic {
	width: 100px;
	height: auto;
	border: 10px solid white;
}

.galleryPic:hover {
	border: 10px solid grey;
}

.galleryDiv {
	position: relative;	
	display: block;	
	margin-left: 10%;
	margin-right: 10%;
	border: 2px solid black;
}

.bigPic {
	position: relative;
	display: block;
	width: 30%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.bigPic:hover {
	width: 80%;
	height: auto;
}