Trouble creating a gallery? (using jquery wow)

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: Seçkin Ahşap ve Dekorasyon)

    <!-- Gallery Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-4 portfolio-container">
                $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(\'' . $directory . '/' . $image . '\')"><i class="fa fa-link"></i></a>
    <!-- Gallery End -->

you might use something like this at the top of your PHP script to control caching:

header("Cache-Control: no-cache, must-revalidate");
 // Set appropriate cache-control headers

Configure your server to send appropriate cache-control headers for the gallery images.
setting Cache-Control: no-cache or specifying an appropriate max-age to ensure the images are not cached for too long.

What would this solve if the cache isn’t the issue? The page is perfect when I reload it (second visits are fine) but the 1st page load is the issue and that’s what matters. New clients aren’t going to keep visiting the gallery page.

1 Like

Use the window.onload event to ensure everything on the page, including images, is fully loaded before executing the script that arranges the gallery.

window.onload = function() {
    // Your gallery layout script here
    // This ensures the script runs after everything on the page has loaded

I’m just using classes from the wow.js library, really. So I’m not using any specific layout script, it’s all in the html tag classes and then I call the scripts here:

<!-- JavaScript Libraries -->
<script src=""></script>
<script src=""></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>

<!-- Template Javascript -->
<script src="js/main.js"></script>
<!-- Initialize wow.js after the entire page has loaded -->
    window.onload = function() {
        new WOW().init();
 // Initialize wow.js after the entire page has loaded
1 Like