Magnifico
Powerful Image Loupe Tool
Magnifico is the most flexible and powerful image loupe tool on the internet. It's been built from the ground up to work smoothly on all devices. This is a great tool for photographers, collectors and ecommerce websites.
Upgrade Eligible
Demo
Drag Mode
Click and drag the loupe around the image. The loupe will automatically show and hide when you hover over the image. The loupe position will reset to the center each time you hover back over the image.
Fill Mode
When you hover over the above image, you will notice that the zoomed image will fill the entire container. You will also notice that the zoomed image is completely different from the thumbnail.
Follow Mode
The loupe above will appear when you hover over the image. The loupe will follow your mouse as you move. On mobile, you can tap different parts of the image to move to loupe around. The loupe has also been styled a bit differently.
Static Mode
The loupe above is static. You can define where to position it over your image. You cannot move the loupe around the image. If you double click the image, you can show/hide the loupe. This is a feature in all loupes.
Move to:
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/rightarrows - grow/shrink the size of the loupeup/downarrows - zoom in/out of the image
These keyboard controls are available across all active loupes on the page.
Loupe Swatch
The Magnifico Swatch allows you to apply a loupe to an entire set of images with a single Magnifico swatch stack. This even works with many gallery stacks out there including Total CMS. This means that you can dyanmaically add loupes to an entire gallery.
Reviews
We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.
Screenshots
Tutorials
Downloads
{{ title }}
Uploaded by {{{ from }}}
Updates
v{{ version }}
© 2024 Weavers Space | Terms of Service | Privacy Policy