Hi i'm iver currently working on a system,
My problem is i want to enalrgen the image by clicking on it so i can see the details of the picture.
Assume that the admin wants to view the business permit of the user that signed up, he/she wants to view the picture more clearly so it needs to enlarge when clicked.
Regards,
Iver
Hi @iverson fuensalida ,
I have added a popup to your OML file. When a user clicks on an image, it will open in the popup. The popup includes a close icon; clicking on this icon will close the popup.
Please see the below image for your reference.
Hi @iverson fuensalida, You can use "LightboxImage" from OutSystemsUI, please refer to the screenshot below.
ThanksGitansh Anand
How can i use it? the tutorial on outsystem doesn't give me any idea.
Fuensalida
Hi iverson fuensalida,
You can add a popup so that when the user clicks on an image, it is displayed in the popup.
Thanks,
Vipin Yadav
HI @Vipin Yadav,
How can i implement that when i have different pictures per account id?
Hi can you please implement it on my oml?
Your solution might be the best pick for me but i don't know how to do it.
Hi @Vipin Yadav,
Can you check my updated oml and see what's the issue? It doesn't show the picture when i click it.
i put the content into the corresponding database
You need to include an input parameter of the binary data type in the onclick client action to pass the image data when the image is clicked. Please review the OML code I've provided.
You pass image like below image -
You need to declare a local variable with a binary data type. Then, assign the imageBinary data to this local variable within the onclick client action.
you need to bind popup image with local variable of image.
Hello,
You can zoom image when click using CSS also as implemented in OutSystems forums and documentation.
Please check this post:
https://www.outsystems.com/forums/discussion/99036/how-to-make-image-zoomable/
I suggest you to add the CSS for the image. Then adjust the scale how much you want to enlarge the image.
.img:hover
{
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
Warm regards,
Dinesh M
@iverson fuensalidaLightBoxImage is fit with your need. Below is demonstration from Outsystems.https://outsystemsui.outsystems.com/WebStyleGuidePreview/LightboxImage.aspx