Zoom into images for scrollview pages

[Serhat]

Hi,

is there any way to implement a zoom with the kendo scrollview? For example the zoom could be implmented through scrolling with the mousewheel when hovering over the image.

I tried using an external library called ngx-image-zoom however it seems to have some compatibility issues when used together with the scrollview. The pages are always cut of at the bottom, so a part of the content is not visible. Any help is greatly appreciated.

Kind regards,

Serhat

 

[Martin]

Hi Serhat,

I am afraid that the Kendo Angular ScrollView does not have a built-in option to zoom the images in the desired way. However, it could be a valuable addition to the widget. That is why I logged a new feature request from your behalf in our Feeback Portal where people can vote for it and help us to estimate the customer demand for such enhancements:

https://feedback.telerik.com/kendo-angular-ui/1468045-zoom-into-images-for-scrollview-pages

As a workaround, the zooming functionality can be achieved by using some custom JavaScript code handling the mouse wheel event:

https://stackblitz.com/edit/angular-p48usd-2oqnl4?file=app/app.component.ts

Using Shift + mouse wheel will zoom the image, but using only the mouse wheel will scroll it vertically. Utilizing a touchpad will require a magic mouse as the normal mouse does not have a left and right mouse wheel functionality.

These articles might be helpful as well:

https://www.geeksforgeeks.org/how-to-zoom-in-and-zoom-out-image-using-javascript/

https://stackoverflow.com/questions/46109408/zoom-in-image-javascript

It is worth mentioning that the purpose of the example is to point the developer in a possible direction. However, it relies on custom logic which changes the default behavior of the ScrollView component which is neither fully tested nor an officially supported solution. The example can be further modified in order to meet the exact use case, but such effort falls out of the scope of the support service.

Regards,
Martin
Progress Telerik