Image Zoom

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
User avatar
Posts: 56
Joined: Fri Dec 04, 2015 6:41 am

Image Zoom

Post by lawingo » Wed Sep 20, 2017 4:01 am

I have a carousel that displays a collection of images. I want to zoom in on the image as the user hovers the mouse over the image. I have found some third party products like (elevateZoom) that creates the zoom for you. This product (and a few others I have looked at) manipulates the DOM with jQuery. I have created a Widget to interface with this widget but I'm unsure how to assign the Image a specific class or Div ID so that I can idenfity it within the DOM with jQuery.

Maybe I'm going about this wrong. Has anyone successfully wrote something like this or can offer a better solution??

Many Thanks

User avatar
Stewart Marshall
Posts: 417
Joined: Thu Nov 05, 2015 5:25 pm

Re: Image Zoom

Post by Stewart Marshall » Wed Sep 20, 2017 1:24 pm

Hi Chad

This is really easy to achieve in VL.
Capture.PNG (598.14 KiB) Viewed 1423 times
In this example, the image on the left is 200 x 200. The image on the right is a 1000 x 1000 parented to a smaller panel which acts like a viewport allowing only some of the large image to be seen.

All we need do is move the big image around a proportional amount within the viewport as the mouse moves in the small image. If the viewport is 400 wide, there must be 600 pixels that can't be seen. The small image is 200 wide, so every pixel move on the small image needs to move the large image 3 pixels.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<2015Blue>) Height(529) Width(896)

Define_Com Class(#PRIM_VS.Style) Name(#Style2) BackgroundBrush(#Brush1)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(Theme50)

Define_Com Class(#PRIM_IMAG) Name(#SmallImage) DisplayPosition(1) Left(0) Parent(#SmallImagePanel) TabPosition(1) TabStop(False) Top(0) Height(200) Width(200) Image(#xImageEmployee512) ImageSizing(BestFit)
Define_Com Class(#PRIM_IMAG) Name(#ZoomedImage) DisplayPosition(1) Left(0) Parent(#Viewport) TabPosition(1) TabStop(False) Top(0) Height(1000) Width(1000) ImageSizing(BestFit)
Define_Com Class(#PRIM_PANL) Name(#Viewport) DisplayPosition(1) Left(295) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(15) Height(434) Width(490) Style(#Style2)
Define_Com Class(#PRIM_PANL) Name(#SmallImagePanel) DisplayPosition(2) Left(14) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(15) Height(200) Width(200) Style(#Style2)

Define_Com Class(#prim_timr) Name(#Timer) Interval(20) Startup(Manual)

Define Field(#MouseHorizontal) Type(*Dec) Length(9) Decimals(2)
Define Field(#MouseVertical) Type(*Dec) Length(9) Decimals(2)

Evtroutine Handling(#Com_owner.CreateInstance)

#ZoomedImage.Image <= #SmallImage.Image


Evtroutine Handling(#SmallImage.MouseEnter)



Evtroutine Handling(#SmallImage.MouseLeave)



Evtroutine Handling(#Timer.Tick)

* Calculate the position of the mouse relative to the small image
#MouseHorizontal := #sys_mouse.HorPosition - #SmallImage.ScreenLeft
#MouseVertical := #sys_mouse.VerPosition - #SmallImage.ScreenTop

* Large image is parented to the ViewPort, so only a percentage showing
* Every pixel move needs to be amplified by the percentage of the image that's hidden
* Multiplied by -1 because the image moves in the opposite direction to the mouse
#ZoomedImage.Left := #MouseHorizontal * (#ZoomedImage.Width - #Viewport.Width) / #SmallImage.Width * -1
#ZoomedImage.Top := #MouseVertical * (#ZoomedImage.Height - #Viewport.Height) / #SmallImage.Height * -1


Hope this helps

Stewart Marshall

Independent IT Consultant

Post Reply