I am looking to create a fullscreen lightbox modal for multiple images, but I have been facing issues with finding the right solution. Most lightbox modals out there rely on jQuery and older versions of Bootstrap.
Here is what I have tried so far:
HTML:
<div id="howItWorksSteps">
<p>2) Customer selects items to be included in quote.</p>
<img class="myImg" src="images/MarketplaceSolution_3.jpeg" alt="" style="width:100%;max-width:300px"
data-bs-target="#myModal">
<p>3) Customer selects shipping options.</p>
<img class="myImg" src="images/MarketplaceSolution_4.jpeg" alt="" style="width:100%;max-width:300px"
data-bs-target="#myModal">
<p>4) Customer requests a quote.</p>
<img class="myImg" src="images/MarketplaceSolution_5.jpeg" alt="" style="width:100%;max-width:300px"
data-bs-target="#myModal">
<p>5) Seller responds to quote with confirmed prices and shipping costs of order.</p>
<img class="myImg" src="images/MarketplaceSolution_6.jpeg" alt="" style="width:100%;max-width:300px"
data-bs-target="#myModal">
<p>6a) Customer pays for order.</p>
<img class="myImg" src="images/MarketplaceSolution_7.jpeg" alt="" style="width:100%;max-width:300px"
data-bs-target="#myModal">
<p>6b) Seller updates order as paid.</p>
<img class="myImg" src="images/MarketplaceSolution_8.jpeg" alt="" style="width:100%;max-width:300px;"
data-bs-target="#myModal">
<p>7) Seller updates customer with shipping details including tracking numbers.</p>
<img class="myImg" src="images/MarketplaceSolution_9.jpeg" alt="" style="width:100%;max-width:300px"
data-bs-target="#myModal">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="multipleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<div class="container-fluid p-0">
</div>
</div>
</div>
</div>
Javascript:
const divHowItWorks = document.getElementById("howItWorksSteps");
const howItWorksImgs = divHowItWorks.querySelectorAll("img");
howItWorksImgs.click(function() {
const imageSrc = $(this).data('src');
});
const myModal = document.getElementById("myModal");
const currentImg = document.getElementById("image");
currentImg.attr('src', '');