Mijn website heeft deze structuur:
Root
|
Map:Test (tijdelijk to hij werkt)
index.html (laadt die php pagina's in)
|
Map: imageSlider
index.php
Map: imageGallery
index.php
----------
Code index.php
---------
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<link rel="stylesheet" href="imageGallery/style.css">
</head>
<body>
<div id="gallery">
<?php include 'imageGallery/load_images.php'; ?>
</div>
<div id="popup" style="display:none;" onclick="closePopup()"> <img id="popup-img" src="" alt="Large image" onclick="closePopup()">
<p>Image description and details here.</p>
<button onclick="window.location.href='imageGallery/more-info.html';">More Information</button>
</div>
<script src="imageGallery/script.js"></script>
</body>
</html>
---------------
Code load_images.php
---------------
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>
<?php
$thumbnailDir = 'thumbnails';
$fullSizeDir = 'fullsize';
$images = array_diff(scandir($thumbnailDir), array('..', '.'));
usort($images, function($a, $b) {
return strnatcmp($b, $a);
});
echo '<div id="popup">';
echo '<img id="popup-img" src="" alt="Full size image" onclick="closePopup(event)">';
echo '<div class="overlay-text">';
echo '<p>Image details here</p>'; // Small text on the left
echo '<button class="close-button">Close</button>';
echo '<button onclick="moreInfo()">More Info</button>';
echo '</div>';
echo '</div>';
foreach ($images as $image) {
$fullImagePath = $fullSizeDir . '/' . $image;
$thumbnailPath = $thumbnailDir . '/' . $image;
echo '<div class="thumbnail">';
echo '<img src="' . $thumbnailPath . '" alt="Thumbnail of ' . $image . '" onclick="openPopup(\'' . $fullImagePath . '\')" />';
echo '</div>';
}
?>