Lightbox Gallery

Create a minimal Lightbox Gallery. A lightbox gallery is an image gallery with many images lined up as tiles. Once a tile is clicked, a full-screen image opens up in a Modal, showing the clicked picture. It also has all the other images lined up at the bottom. Once a tile at the bottom is clicked, it shows the clicked image in full screen.

User Stories and Tasks

1. All the images should be displayed in a grid, which has to be responsive.
2. If an image is clicked, it opens in a modal where the end user can see the clicked image in its full width and height.
3. There will be a tile of images at the bottom of the modal.
4. If any tile is clicked, the main image changes and will reflect the currently clicked image.
5. The clicked image will have a border of blue (active image at the bottom tile).
6. Clicking on the image closes the modal.
7. Clicking outside of the image closes the modal.
8. On hover, an overlay of black with opacity 0.5 should be applied on the image thumbnail.

Note

1. The images object in images.ts is provided in the boilerplate code. All the links to the images will be there.
2. You can refer to Tailwind Box Shadows to get beautiful box shadows in Tailwind and Vanilla CSS. The box shadow has to be integrated at the main image.