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
There are 4 different loupe modes that can be customized to your needs. Each mode provides a unique experience with interacting with the loupe.
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.
By default you can drag and drop images into Magnifico. However, you can also provide warehoused URLs to the images as well.
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.
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.
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.
Magnifico will only load the higher resolution loupe image when the image scroll into the viewport. This greatly improves page load times.
Magnifico works great on touch devices. All 4 modes have been fully tested on touch devices.
You can customize the style of the loupe's size, color, shadow and even add lens glare for a realistic look.
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.
Like all of our stacks, Magnifico works in all RapidWeaver themes.
{{{ summary }}}
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?
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.
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 loupeup
/ down
arrows - zoom in/out of the imageThese 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.
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.
Uploaded by Weaver's Space
RapidWeaver project file
Uploaded by Weaver's Space
Uploaded by {{{ from }}}
data-position
attribute to your link with the value being a commadelimted list of X and Y coordinates. Example: 50,60
© 2025 Weavers Space | Terms of Service | Privacy Policy
"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."