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.
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.
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.
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.
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.
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?
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
rightarrows - grow/shrink the size of the loupe
downarrows - zoom in/out of the image
These keyboard controls are available across all active loupes on the page.
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.