Best method for enlarging an image?


I am trying to figure out the best method to enlarge an image when a user clicks on it.

For example, they see an image, they click image, then the same image will enlarge in another ‘pop up’ type box, but the user is still on the same web page, it doesn’t open image in a new tab or anything.

I’ve thought about creating a data point for the current selected image and showing that, but is there any other method? I feel like this method could me to use unnecessary date store.


I did this without any plugin, you can check if there is any and share here.

You mean, a thumbnail of an image like we see in a gallery on webpage, we click it expands.

I created a group (thumbnail) with a small height and width, with the background image.

Created a popup with a larger group inside has same background image.

When thumbnail (small group) is clicked, pop shows up!:dart:

Would this work if its a dynamic image though?

The image they click will always be different, which is why I thought of the creating it as a data point.

If it just one single image that is always the same then your method could work but what about a dynamic image?

You are right, my purpose was for the static image though.

You can try dynamic background like dynamically from url based on input or API call (url, base64 etc.)

Well the initial image(s) are set dynamically through an API call.

Just want to find a way to enlarge any of the multiple images when clicked on.

maybe making a data point is the only way unless there is some plugin

Share here if possible once you solve it, this will help me and others eventually.

Of course

This topic was automatically closed after 70 days. New replies are no longer allowed.