How to enlarge the picture by clicking on it ?
Application Type
Traditional Web

Hello,


How to enlarge the picture by clicking on it and have a button for closing this zoom?

I am using the Traditional Web.

Is it possible to implement it without any external plugins?


Thank you.

mvp_badge
MVP

Hi Ekaterina,


If you want just to enlarge on zoom, you can very easily do that with CSS (take a look at this example).

If you really want to go for a clickable option, I would recommend using a Modal (from OutSystems UI) which opens when you click an image, displays an image widget with a larger size and shows a cross to closes the modal.


Hope it helps.


Kind Regards,
João


Hi Ekaterina,

If you do not want to use external plugins then you can do it with the help of two images on conditional display with close button, for a reference I have attached the OML,

Regards,

Komal


EnlargeImage.oml

Hello

Are you looking for something like this - https://personal-9qwkrkgl.outsystemscloud.com/ImageZoomReactiveApp/Home?_ts=637481467934837811

Please confirm, if yes. I will help you to build this in Traditional Web App too.

mvp_badge
MVP

Hi Ekaterina Fedorchenko,

You can also refer to the lightbox offered by SILK UI:

https://silkui.outsystems.com/silkui/Patterns_Web.aspx#Web_Featured_LightBox


Regards,

Manish Jawla

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.