I have been working on creating a photo gallery using the Bootstrap 5 example on masonry, and everything is working well so far. I have also successfully implemented modal boxes. However, the only issue I'm facing is with the JS Image Loaded not preventing the images from stacking on top of each other on first load (it works fine after a refresh due to caching).
I suspect that my JS implementation may be incorrect, but I'm unable to figure it out. I don't want to move on to the CSS until I have completed my wireframe, so I'm currently stuck.
Could someone please offer some assistance?
Here is the HTML part of the gallery (please excuse the roughness):
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2dfc2dd">[email protected]</a>/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) is as follows:
$('#gallery').imagesLoaded( function(){ $('#gallery').masonry({ itemSelector: '.gallery-item', percentPosition: true, isAnimated: true, isFitWidth: true }); });
When I test this in Google Chrome or Firefox, I encounter the following error:
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 taking the time to read this and for any assistance you can provide!