Need code tips to duplicate WIX function for popup window over image in database display page

Discussion Ask a question
,
1

I have a repeater table list that displays data base elements. All elements are text (height, width, name, theme) except for one column which is image, a photo of a painting.The image displayed in the repeater table is small, a thumbnail.
I want to add the code to see a larger size of the image when the mouse hovers over the image in the table.
WIX amazing programmers have accomplished this task. In the Database display page (looks like an excel spreadsheet) when you hover the mouse over an image element, you will see a pop up window with a larger size of the image, the filename and the pixel height/width. The pop up goes away when you move the mouse off the image element.
There are 2 issues as I see it;
1.) I will have to track the mouse when it is in the table and only look for the image info when the mouse is over the image,
2.) I have to query the image info (metadata?) to get file name of the image and the path to the file (url) so I can display that information in the popup box.

I have done a lot of programming using Visual basic so I have some ideas what to do but this coding is a little foreign to me. Perhaps the WIX programmers could share some tips to assist and if anyone has suggestions how to proceed, please bring it on.
Gratefully yours, Bill Osten Houston. My website on WIX is www.henrydavidpotwin.com
I maintain this website for a high school friend of 40+ years who is an amazing artist.

See example in attached below:
Below is the function I want to duplicate. Have a pop up window display when mouse hovers over a image.

429×810 193 KB

Below is an example of where I want to use this function. I display a repeater table list with the image in the first column. Then I have the text info for that image asother columns. When I hover over the image I want a larger size of the image to come up in the box with some image information.

2

Hi,
I would recommend using repeater element and not table because you can use onMouseIn event of an image inside the repeater. You can design the repeater to look like a table.
When the mouseIn event is triggered it will show the bigger picture which was set to hidden.
The next step is to set onMouseOut event which will hide the bigger image.
For more information:

Good luck!
Roi.

3

Thanks Roi. I will begin to learn coding here and try it out. Can you provide tips on how I will capture the image file name from the repeater image element to use to display in the hidden image box? Is the image file name an “event” generated by the mouseover? (ie let clientX = event.clientX; // 362)?
Thanks again for the tips so far, coding is a game to me which I like to play and accomplish a goal.