Giuliano De Luca | Blog | delucagiuliano.com Here I’m with a new blog post about SharePoint Framework. I faced an interesting client side solution regarding the possibility to magnify an image, so I decided to reproduce something of similar with SharePoint Framework.

I love the property pane in SharePoint Framework because of course as for the classic web part that exists from many time, allow you to configure the web part in a flexible way. Currently it’s absolutely easy creating a customization on the property pane, also with a control developed by yourself. In order to approach this solution in the right way, firstly I created a separated proof of concept (React App), after that, I imported the code into a new SharePoint Framework solution and below you can see the result:

Giuliano De Luca | Blog | delucagiuliano.com

The entire mechanism works with two components, the first display a normal image with few pixels, the second check the mouse position and create an overlapped image with more pixels inside of a lens. As I anticipated before talking of property pane, during the development I though how to leverage the capabilities of the property pane in order to offer a solution really flexibel. Below you can find the properties configurable:

PropertyDescription
URL small imageThe URL of the small image
Width small imageThe width of the small image (px)
Height small imageThe height of the small image (px)
URL HD imageThe URL of the HD image
Width HD imageThe width of the HD image (px)
Height HD imageThe height of the HD image (px)
cursorOffset x ythe offset of the zoom bubble from the cursor
sizethe size of the magnifier window

My solution is available on github: https://github.com/giuleon/SPFx-react-image-magnifier

Source code of this web part is also available on the official GitHub of Microsoft SharePoint Framework client-side web part samples & tutorials: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-image-magnifier