Creating a lightbox for the product gallery

The last interactive feature we want to make for the website is a lightbox for the product gallery on the Product page. We will simply use the modal component to display a large image when clicking on one of the thumbnail images.

First, we will insert the minimum code for a modal at the bottom of our product.html file, after the closing </footer> tag and before the two <script> tags. We will make the modal large and vertically centered by using the .modal-xl and .modal-dialog-centered modifier classes. We won’t have any modal header, modal body, or modal footer since we don’t want any padding or other UI elements in the modal. We only want our large image and the backdrop of the modal surrounding it. It will still be possible to close the modal using the Escape key or by clicking outside of it somewhere on the backdrop. The class on the <img> tag will be used as a hook for our JavaScript:

part-2/chapter...