Trouble creating a gallery? (using jquery wow)

JavaScript
1

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">
                <?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 -->
2

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.

3

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
4

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
};
5

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="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></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>
6 
<!-- Initialize wow.js after the entire page has loaded -->
<script>
    window.onload = function() {
        new WOW().init();
 // Initialize wow.js after the entire page has loaded
    };
</script>
1 Like