Tracking a selection of images in a list

I’m working on a web app that features a grid of images. The number of images is dynamic and can be larger than 100. The user can select images and I want to track which ones he/she clicked on. I’m not quite sure how I could do this in Dash. Giving each image its own callback doesn’t work because of the high and dynamic number of images.

One possible solution could be to add an HTML class on-click to the specific image and then search all images for that class afterward in a single callback that gets the container. But I don’t know how to do that.

Thanks for your help

I had the same problem. My use case was that I only have 3 images to select from. I did a callback to check if image was clicked using n_clicks. If so, the callback toggles the style of the image and puts a border around it. Then, I have another callback with input of all images and their styles. If style includes border, then that is the selected image.

Possibly you could create some for loop to scale this out. Not pretty but I couldn’t find another way.