zoom image widget

[Jose Manuel]

Hello everyone ,
Someone knows step by step how to recreate and apply on a widget image the
example indicated in the link.?

https://www.w3schools.com/howto/howto_js_image_zoom.asp

thank

[TaskForce_Kerim]

Hello Jose,

you can petty much use the code that you found on w3schools

I made a video for you. The video shows everything, below is a short explanation and the links you need:

1. go to https://codepen.io/anon/pen/MBKLRZ and copy the CSS code (I adjusted the CSS and JS a tiny bit)
2. create a CSS file in your profoundui folder ( for example /www/profoundui/htdocs/profoundui/userdata/css )
3. put the CSS code in it and save the file
4. open up the Visual Designer
5. set your record format name and paste the JS code from here into the record format's "onload" event
6. set the external css attribute to your newly created CSS file (point 2)
7. use a big simple container widget
8. place an image widget in the top half, set the id to "originalImage" and set the image source
9. place another simple container widget in the bottom half, set the id to "zoomedImage"

Hope this helps!

[Jose Manuel]

First of all, thank you for your work in the community.
I have seen the video and tell you that it is a fantastic explanation.
As we say in my town (Sevilla-Spain) OLEEEE !!!

[TaskForce_Kerim]

Hello Jose,

I am glad you like it!

And I hope it's all clear. The only thing you should remember is that you have to put the originalImage widget and the zoomedImage widget into a container.

I have attached a JSON of a Rich Display File that has everything built-in. You only have to change the "external css" attribute in the record format name and the "image source" for the image widget. You can open the JSON file in the Visual Designer.

Cheers!