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
- All the images should be displayed in a grid, which has to be responsive.
- 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.
- There will be a tile of images at the bottom of the modal.
- If any tile is clicked, the main image changes and will reflect the currently clicked image.
- The clicked image will have a border of blue (active image at the bottom tile).
- Clicking on the image closes the modal.
- Clicking outside of the image closes the modal.
- On hover, an
overlay of black with opacity 0.5 should be applied on the image thumbnail.
Note
- The
images object in images.ts is provided in the boilerplate code. All the links to the images will be there.
- 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.