Magnifico

 5/5 (1 review)

icon

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

4 Loupe Modes

There are 4 different loupe modes that can be customized to your needs. Each mode provides a unique experience with interacting with the loupe.

Thumb + Full Res

You have the ability to choose to use 1 or 2 different images. This could be either a higher resolution image or something completely different.

cloud-upload

Warehouse Image

By default you can drag and drop images into Magnifico. However, you can also provide warehoused URLs to the images as well.

sliders-h

External Controls

You can easily control the loupe from external buttons and controls. There are even keyboard shortcuts that allow you to quickly resize and zoom the loupe.

swatchbook

Powerful Swatch

Magnifico ships with a swatch that allows you to add loupes to multiple images at once. This requires either Foundation 6 or our Swatches stack.

fire

Total CMS

You can easily integrate Magnifico with Total CMS images. With the provided swatch, you can even apply a loupe to an entire Total CMS gallery.

tachometer-alt-fastest

Performance

Magnifico will only load the higher resolution loupe image when the image scroll into the viewport. This greatly improves page load times.

mobile

Touch Friendly

Magnifico works great on touch devices. All 4 modes have been fully tested on touch devices.

paint-brush

Loupe Styles

You can customize the style of the loupe's size, color, shadow and even add lens glare for a realistic look.

eye-slash

Auto Show/Hide

There are settings to auto show/hide the loupe on hover. You can also have it show automatically on page load or when scrolled into view.

star

Works in ALL THEMES

Like all of our stacks, Magnifico works in all RapidWeaver themes.

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
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 / 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.

Reviews

 5/5 (1 review)


Bill Burden

Bill Burden

Retirement is Good Ltd.

star-alt
star-alt
star-alt
star-alt
star-alt

"I would like to think that Joe created this stack just for me and then agreed to let other use it as well. My 'focus' is on sharing postage stamp images and a tool which allows me to show very fine details of an image is an absolute necessity for my site. I tried the others, but Magnifico is simply 'the Best!'. This thing I know."



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

screenshots
screenshots
screenshots
screenshots
screenshots
screenshots

Tutorials

Secret Foundation Swatches
Secret Foundation Swatches
Magnifico Settings Overview
Magnifico Settings Overview
Magnifico Stack Overview - Best Image Loupe on the Internet
Magnifico Stack Overview - Best Image Loupe on the Internet

Downloads

Magnifico Demo Project

Uploaded by Weaver's Space

Magnifico Demo

RapidWeaver project file

Uploaded by Weaver's Space

Updates

v1.1.0

  • You can now create quick links to move the loupe to specific positions on the image. This is perfect fo quicklytaking your visitors to important parts of an image. The class that is added to your button or link can be configuredinside of the Magifico stack. You will need to add a data-position attribute to your link with the value being a commadelimted list of X and Y coordinates. Example: 50,60
  • Updated the Magifico demo project with example use of the new position feature

v1.0.9

  • Magnifico will now work better in some containers when it's hidden on page load. Tested examples: MovingBox 3 and Foundation 6 Lightbox.

v1.0.8

  • Update GSAP animation libraries to latest version

v1.0.7

  • Updated the GSAP library to the latest version

v1.0.6

  • Overflow fix for latest Safari 16
See all updates Thanks!

You may also like…

scroll me

HANGOUTS

Next Hangout Session
Friday, January 10

Subscribe

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

© 2025 Weavers Space | Terms of Service | Privacy Policy

HelpShelfHelpShelf