Image Zoom

A new user control was included in order to display a zoom of an image. This user control is used by default in the product detail of the E-Commerce Design:

A sample e-commerce product page titled Sabrina Tach shows the Matisse Slipper priced at $4560, with thumbnail images, a description (Soft Black leather upper, Leather lining, Wooden Heel, Platform Height 4cm/1.5"), a Quantity selector, and an Add to Cart button.

If you want to use this new user control in your own screen, you should add a new "User Control" node within your instance and select the "DVZoomImage" user control:

The Work With Plus pattern tree for a Web Panel shows a User Control node DVImageZoom added under TableContent, next to a Related Products free style grid. A red arrow points to the Properties panel showing Control name DVImageZoom, User Control DVelop.DVImageZoom, and cell width/visibility settings for each responsive breakpoint.

Then, in order to use the control, you need to assign to it the image where you need to apply the zoom. You can do it as follows:

GeneXus source code snippet showing an Event &Image.Click handler that sets DVImageZoom.ImageInternalName to &Image.InternalName and DVImageZoom.LargeImage to &Image.ImageURI, ending with EndEvent.