redopop / loupe

A lightweight image magnifier for modern browsers.

Loupe

Loupe is a lightweight, hackable pointer-based image magnifier for modern browsers.

Installation

Loupe is available as a Bower package:

bower install loupe

Basic use

Add loupe.js and some accompanying CSS (modeled on loupe.css) to your page.

Loupe is a constructor function, and should be called with an element as its only parameter. That element can be a link to a larger version of the image:

<a id="demo-1" href="big.jpg">
  <img src="small.jpg" />
</a>

<script>
  new Loupe(document.getElementById('demo-1'));
</script>

…or it can be the image itself, in which case a magnified version of the same image source will be displayed in the loupe:

<img id="demo-2" src="big.jpg" />

<script>
  new Loupe(document.getElementById('demo-2'));
</script>

(Obviously you wouldn't actually use inline JS for this! These examples are just to demonstrate loupe construction!)

Browser compatibility

Loupe is designed with progressive enhancement in mind, and will simply not show up in environments that don't support it. It's been tested and works in the following clients:

• MSIE 11+ (will not work in IE 8, 9, or 10)
• Desktop Safari 7 (minus the scrollwheel zoom feature)
• Firefox 28
• Chrome 36

Touch screen support

Image magnifiers work well with mice and trackpads, but there are better options for touch screens. Loupe purposely avoids activating itself on touch screens.

Q&A

Wasn't this a jQuery plugin?

It was! The jQuery version is still supported in 1.x releases, but no new features, API changes, or configuration options will be added to it in this repo.

There are several forks of the jQuery version with new features and customization options, so if that's a thing you're interested in then please do mosey on over to the list of forks and see if there's an active fork offering what you want.

loupe's Issues

Any way to turn it off?

Is there a way to turn the loupe off? I tried

$('selector').loupe().stop();

but that didn't work. Any ideas?

Update dependencies to fix builds

Travis builds were broken after merging a recent PR.

The issue is not related to the PR itself, which was a trivial comment change. It's likely due to outdated dependencies. It's time to blow some dust away.

Won't Activated Magnify From Right or Bottom

If I hover in from the right or the bottom of my image, the magnify doesn't activate.
If I hover in from the left or the top of my image, it works fine.

I've toyed with specifying various widths and heights, but I can't seem to get this worked out.

jQuery 1.4.2?

Hi there,

In the demo code I replaced jquery 1.3 with jquery 1.4.2, and the demo failed. What can I do to get Loupe to work with jquery 1.4?

Disable loupe?

Is ther any way to disable loupe? I need plugin to be activated or deactivated by user, but I´m not able to do that. Is ther any way?

Thanks.

Loupe does fall outside the limits of the image

Hi All,

I want to create a "magnifying glass" / "lens zoom"

I'm attaching an example here.

Is there an option for the loupe not to go outside the image limits?

Thank you!

Not working correctly when window is scrolled

To fix that change loupe position from fixed to absolute.
https://github.com/redoPop/loupe/blob/master/loupe.css#L17

Future request: Allow loupe image source to be encoded

Future request: Allow loupe image source to be encoded
When loupe is used on sites that sell pictures it will be helpful if source of the big image is not in plain text

https://github.com/redoPop/loupe/blob/master/loupe.js#L193
replace: newS = el.href;
with: newS = atob(el.getAttribute('data-enc')) || el.href;

then in our source we can use php to encode. example loupe.php:
<a id="demo-1" href="medium.jpg" data-enc="<?php echo base64_encode('big.jpg');?>">
<img src="small.jpg" />
</a>

will generate: data-enc="YmlnLmpwZw==" in the webpage

if data-enc is not present then loupe will use the href , like in your version

[Help] Implementation with Fancybox v3

Hello friends, would you have an example of implementation next to the latest Fancybox v3 plugin, after opening the zoom box? I'm using the following code, but without effect, Loupe doesn't even find the image.

$('.lightboxTrigger').fancybox({
    protect: true,
    touch: false,
    clickSlide: false,
    clickOutside: false,
    clickContent: false,
    afterShow: function (instance, current) {
        let fancy = current.$image
        let current_src = current.src

        const options = {
             magnification: 3,
             width: 250,
             height: 250,
             style: { boxShadow: "4px 5px 5px 4px rgba(0,0,0,0.5)" },
             shape: "circle",
        };
        const loupe = new Loupe(options);

        enableLoupe(fancy, current_src, loupe);
    }
});

Destroy method doesn't work in v2.0.0

The destroy() method doesn't work in v2.0.0. I've created a commit with the fix, but I'm unable to create a PR (not sure why, probably permissions).

Commit: 1597d03

I see this issue is fixed on the master branch, but there's no release of that yet. So new users will download v2.0.0 with a broken destroy() method.

Quick movement lag

The loupe gets stuck frequently when the cursor is moved quickly. Is there any way to prevent that from happening? Usually happens on its way in and out. Happens in Mac on all browsers. The large image is 1600px, and the small image is around 600px. Is that too large for the large image?

Doesn't work on iOS Safari

Doesn't work on Safari on iPad or iPhone. The first 'touch' will show the loupe, but it's impossible to move the view after that.