Slick Ajax Magnifier
Recently we had a customer ask if we had anything like our WinForms Magnifier MouseTool available on the WebForms side of things. We get this question somewhat frequently, and it's always one of those features that seems to fall off the end of the development cycle to higher priority features. The answer to this question has always been: "It's not inherantly supported, but you could probably make your own by floating another WebImageViewer over the mouse position."
I spent a little of my free time on it, and I've been able to confirm that this works. Here are the steps that you need to take to get it to work:
- Create a WebForm with two WebImageViewer controls on it, one as the main viewer, and one as the magnifier.
- Wrap the magnifier WebImageViewer in a div tag, give the div tag an ID, and set the style to display:none.
- Attach a JavaScript MouseDownLeft event to the main viewer.
- In the MouseDownLeft event, attach JavaScript MouseMove and MouseUp events to both of the viewers, and set the style of the magnifier div to display:none.
- In the MouseMove events, set the position of the magnifier div to the position of the mouse - half the size of the magnifier.
- In the MouseUp event, detach the MouseMove and MouseUp events (by setting them to a blank function) and set the magnifier div style to display:none.
- The final step is to load the same image into both of the WebImageViewer controls, BestFit the main viewer, and keep the magnifier at zoom level 1.
I have attached a VS 2005 demo solution that shows how all of this is put together. This is a file system based web application with dll.refresh files pointing to the install location of DotImage. If you do not have DotImage installed at that location, you will need to remove and re-add your references to the Atalasoft dll's.
