Hi, my gallery images stack up on the first visit but display fine after a page reload. Any idea what’s causing this? (live preview: https://seckinahsapdekorasyon.com/galeri)
<!-- Gallery Start -->
<div class="container-xxl py-5">
<div class="container">
<div class="row g-4 portfolio-container">
<?php
$directory = 'img/galeri'; // replace with the actual path to your image directory
// Get all files in the directory
$files = scandir($directory);
// Filter out non-image files
$imageFiles = array_filter($files, function ($file) {
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
$extension = pathinfo($file, PATHINFO_EXTENSION);
return in_array(strtolower($extension), $allowedExtensions);
});
// Echo all the images from a directory
foreach ($imageFiles as $image) {
echo '
<div class="col-lg-4 col-md-6 portfolio-item wow fadeInUp">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="' . $directory . '/' . $image . '" alt="' . pathinfo($image, PATHINFO_FILENAME) . '">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="' . $directory . '/' . $image . '" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href="javascript:void(0);" onclick="copyToClipboard(\'https://seckinahsapdekorasyon.com/' . $directory . '/' . $image . '\')"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</div>
';
}
?>
</div>
</div>
</div>
<!-- Gallery End -->