I have integrated baguetteBox.js into a website with two separate pages:
- homepage
- gallery
On the gallery page, everything is working perfectly fine. However, on the homepage, I am facing an issue where the lightbox controls (e.g., id="baguetteBox-overlay") are unexpectedly appearing at the bottom of the webpage as shown below:
Both pages use the same assets and there are no errors showing in the console.
You can view the issue live at:
- homepage: <- displaying the problem
- gallery:
Version being used: _baguettebox.js/1.10.0 (with Bootstrap 4)
Any suggestions on how to resolve this issue would be greatly appreciated?
Relevant code:
Homepage code snippet:
<section class="gallery-block compact-gallery">
<div class="container">
<div class="row no-gutters">
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image5.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image5.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 5</span>
</span>
</a>
</div>
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image1.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image1.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 1</span>
</span>
</a>
</div>
....
</div>
</div>
</section>
Loading JavaScript at the bottom of the page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.compact-gallery', {
animation: 'slideIn',
});
</script>