Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redoPop/loupe
A lightweight image magnifier for modern browsers.
https://github.com/redoPop/loupe
Last synced: 3 months ago
JSON representation
A lightweight image magnifier for modern browsers.
- Host: GitHub
- URL: https://github.com/redoPop/loupe
- Owner: redoPop
- License: isc
- Created: 2009-12-10T03:28:55.000Z (about 15 years ago)
- Default Branch: main
- Last Pushed: 2021-05-15T22:37:49.000Z (over 3 years ago)
- Last Synced: 2024-06-22T22:05:10.587Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 192
- Watchers: 9
- Forks: 57
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Loupe
Loupe is a lightweight, hackable [pointer-based](#touch-screen-support) image magnifier for [modern browsers](#browser-compatibility).
## 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:
```html
new Loupe(document.getElementById('demo-1'));
```
…or it can be the image itself, in which case a magnified version of the same image source will be displayed in the loupe:
```html
new Loupe(document.getElementById('demo-2'));
```
(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](https://github.com/redoPop/loupe/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](https://github.com/redoPop/loupe/network) and see if there's an active fork offering what you want.