Flutter
Web · Product image zoom
Loupe
A lens that glides after your pointer.
Image zoom for product pages. A lens glides after your pointer, an inside mode magnifies the whole frame where you point, and on touch you can pinch, pan and double-tap.
Demo
A recording of the demo. Open it in a new tab
What it does
- 01
The lens eases after the pointer instead of snapping to it
- 02
Lens and inside-zoom modes that show the high-resolution file
- 03
Pinch, pan and double-tap on touch, with edges clamped
- 04
Keyboard zoom and pan, with the zoom level announced
Use it
git clone https://github.com/YagnikBarasiya23/loupe-image-zoom.git
# copy loupe.js and loupe.css into your project<link rel="stylesheet" href="loupe.css">
<div id="viewer" data-zoom-src="watch-2400.jpg">
<img src="watch-1000.jpg" width="1000" height="1000" alt="Watch dial">
</div>
<script type="module">
import Loupe from './loupe.js';
const viewer = new Loupe(document.querySelector('#viewer'), { zoom: 3 });
</script>Every option, the technique behind the motion and the accessibility notes are in the README on GitHub
More components
All 10- Flutter
Get in touch
Open for freelance projects, contract roles and collaborations — mobile apps and full-stack products in particular. WhatsApp gets the fastest reply.
- Phone
- +91 70488 09875
- Based in
- Rajkot, Gujarat, India
- Elsewhere