Single file Gallery display PHP code
body {
text-align: center;
background-color: lightblue; /* Adding blue background */
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.gallery-item {
text-align: center;
}
.gallery img, .folder-icon {
width: 200px;
height: 200px;
object-fit: contain;
cursor: pointer;
border: 4px double #000; /* Adding dark double border */
border-radius: 10px; /* Adding curved corners */
}
.folder-icon {
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
font-size: 2em;
font-weight: bold;
}
#overlay {
position: fixed;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(173, 216, 230, 0.8); /* Light blue background for overlay */
justify-content: center;
align-items: center;
}
#overlay img {
max-width: 90%;
max-height: 90%;
}
Image Gallery
function displayItems($dir) {
$folders = [];
$images = [];
$items = array_diff(scandir($dir), array('..', '.'));
usort($items, function($a, $b) use ($dir) {
return filemtime($dir . '/' . $b) - filemtime($dir . '/' . $a);
});
foreach ($items as $item) {
$itemPath = $dir . '/' . $item;
if (is_dir($itemPath)) {
$folders[] = $item;
} elseif (preg_match('/.(jpg|jpeg|png|gif)$/i', $item)) {
$images[] = $item;
}
}
foreach (array_merge($images, $folders) as $item) {
$itemPath = $dir . '/' . $item;
if (is_dir($itemPath)) {
echo '
';
echo '
'; echo '
' . $item . '
'; echo '
'; } elseif (preg_match('/.(jpg|jpeg|png|gif)$/i', $item)) {
$fileName = pathinfo($item, PATHINFO_FILENAME);
echo '
';
echo '
';
echo '
' . $fileName . '
'; echo '
'; }
}
}
$rootDir = isset($_GET['folder']) ? $_GET['folder'] : 'images';
displayItems($rootDir);
?>
const gallery = document.getElementById('gallery');
const overlay = document.getElementById('overlay');
const overlayImage = overlay.querySelector('img');
gallery.addEventListener('click', (event) => {
const target = event.target;
if (target.classList.contains('folder-icon')) {
const folder = target.getAttribute('data-folder');
window.location.href = window.location.pathname + '?folder=' + encodeURIComponent(folder);
} else if (target.tagName === 'IMG') {
overlayImage.src = target.src;
overlay.style.display = 'flex';
}
});
overlay.addEventListener('click', () => {
overlay.style.display = 'none';
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
overlay.style.display = 'none';
}
});
window.addEventListener('popstate', () => {
const params = new URLSearchParams(window.location.search);
const folder = params.get('folder') || 'images';
fetch(window.location.pathname + '?folder=' + encodeURIComponent(folder))
.then(response => response.text())
.then(data => {
gallery.innerHTML = data;
});
});
Category:
IT , Technical Hacks etc
Posted on:
February 17th, 2025