My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes. The modifications required are as follows:
When an image in the gallery is clicked, a full-size version of the image should pop up in a modal format (similar to bootstrap modal). The issue at hand is that clicking anywhere on the screen, including the image itself, closes the image. I want the image to close only when the outside area (dark area) is clicked, not when the image itself is clicked. How can this be achieved?
I would like to incorporate a white text box just below each image that adjusts its width based on the image size. This text box will display a circular user profile picture along with the user's username. Clicking on this element should redirect the user to another page, such as the user's timeline. How can I add this text box?
It should be noted that problem 1 and problem 2 are interconnected, as the functionality of clicking on the username is hindered by the premature closing of the image upon any initial click within the window.
Code Pen Snippet: [ https://codepen.io/zoomkraft/pen/KKKNVXN ][1]
[1]: https://www.codepen.io/zoomkraft/pen/KKKNVXN