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.

Key Features

Demo

This is my image

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.

This is my 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.

This is my image

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.

This is my image

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.

This is my image

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?

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
  • up / down arrows - 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.

Screenshots

Tutorials

Loading...

Downloads

FAQs

Updates

You may also like…

HANGOUTS

Next Hangout Session
Friday, February 4

PODCAST

Subscribe

For product releases and updates by email, please subscribe below.

© 2019 Weavers Space | Terms of Service | Privacy Policy