Weaver's Space

Magnifico add-on for Stacks Pro

Loupe Controls In the above demo, you can use external controls to interact with the draggable loupe. You can turn any stack into an external control simply by adding a class to it. This gives you the ultimate in flexibility to build your own custom interface. The demo below uses buttons with SVGs. There are classes to grow/shrink the loupe, zoom in/out and show/hide/toggle the loupt visibility. This example only implements the toggle instead of separate show and hide controls. These controls are flexible as you can make them control one or multiple loupes across different Magnifico at the same time. This demo also uses my Filters stack in order to make the thumbnail black and white. Have some fun below and search for Weaver's Space logos. How many can you find? Move Controls The above buttons allow you to move the loupe to exact coordinates on top of the image. This will allow you to help users navigate to specific important parts of an image in order to investigate. Keyboard Controls On top of the classes that you can use to make custom controls, you can use the keyboard in order to control the loupe while it is active. You use the following arrow keys while holding down the shift key. left / right arrows - grow/shrink the size of the loupe / arrows - grow/shrink the size of the loupe up / down arrows - zoom in/out of the image These keyboard controls are available across all active loupes on the page.
Was this article helpful?

Still puzzling over something?

The agent has read this article — and everything around it. Ask a follow-up and it answers in seconds.