Code

Zoomy - High-res Zoomable Image Viewer

Zoomy - High-res Zoomable Image Viewer

Zoomy is a script that lets you quickly and easily create a high-res zoomable image viewer anywhere in your website. Perfect for maps, eCommerce product images, or any other kind of high-resolution image. All it takes is copying and pasting a short snippet of code.

It’s cross-browser compatible, works on desktop and mobile devices, doesn’t require any third-party scripts like jQuery, and is built using modern Javascript development practices.

Note: for full-screen to work in the live demo, click “Remove Frame” at the top of the page.

Features:

  • Zoom In/Out – Use the zoom buttons on any device, your mousewheel on desktop, or pinch-to-zoom on mobile.
  • Pan – Click and drag on desktop, touch and swipe on mobile.
  • Fullscreen – A button that expands the viewer to actual fullscreen mode, not just the maximum size of the web page. Great for distraction-free viewing.
  • Supports multiple images – Forward and backward buttons to create your own high-res image gallery.
  • Size and position of controls are customizable – You can position the buttons at the top or bottom as well as left, center, or right. You can also choose small, medium, or large buttons.
  • Light and dark color scheme – Uses a neutral color scheme that will blend into most website designs.

Zoomy comes with sensible defaults out of the box and doesn’t require you to configure a dozen options just to get started. All you need is the ID of your element and your image URLs and Zoomy does the rest. You might be surprised how simple the demos are.

by
by
by
by
by
by