How to stop masonry image to stack up on top of each other?

Question

I'm trying to create a photo gallery based on bootstrap 5 example on masonry which does works fine. I also implemented modal boxes with it and it also works fine. To keep it short, the only thing I cannot make works it the JS Image Loaded to keep my images of stacking on top of each others on first load. (It does works fine after a refresh because of the cache probably)

I'm pretty sure I probably worked the JS wrong but I cannot figure it out and I don't want to go onto the CSS before I finished my wireframe so I'm stuck.

Please help?

The html part of the gallery (sorry it's a bit rough) :

<main class="contenu-blog"> <div class="container"> <div class="row grid" id="gallery">
        <div class="col-12 col-sm-6 col-lg-4 mb-4 gallery-item card-mason">
            <div class="card" type="button" data-bs-toggle="modal" data-bs-target="#modal-photo1">
                <img src="img/1.png">
            </div>
            <div class="modal fade" id="modal-photo1" tabindex="-1" aria-labelledby="modal-photoLabel1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="modal-photoLabel1">Chazay, Septembre 2023</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <img class="img-fluid" src="img/1.png">
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-12 col-sm-6 col-lg-4 mb-4 gallery-item card-mason2">
            <div class="card" type="button" data-bs-toggle="modal" data-bs-target="#modal-photo2">
                <img src="img/2.jpg">
            </div>
            <div class="modal fade" id="modal-photo2" tabindex="-1" aria-labelledby="modal-photoLabel2" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="modal-photoLabel2">MICTE</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <img class="img-fluid" src="img/2.jpg">
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</main>

....

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script type="text/javascript" src="js/waitimg.js"></script> <script src="https://unpkg.com/scrollreveal"></script> <script type="text/javascript" src="js/scrollrev.js"></script>

The JS file for masonry/imageLoad (js/waitimg.js) reads :

$('#gallery').imagesLoaded( function(){ $('#gallery').masonry({ itemSelector: '.gallery-item', percentPosition: true, isAnimated: true, isFitWidth: true }); });

Whenever I'll try it in google chrome or firefox, it also gives me the error code :

Uncaught TypeError: h is not iterable

at new n (imagesloaded.pkgd.min.js:12:433)

at i.fn.imagesLoaded (imagesloaded.pkgd.min.js:12:4286)

at waitimg.js:1:15

Thank you for your time and help !

Answer 1

I solved this issue by falling back to version 4.

Change:

  <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js">

To:

  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js">

Version 4 has been around longer and is more mature. It is maintained for older browser versions.