Awesome

iv-viewer

A zooming and panning plugin inspired by Google Photos for your web images. It comes in two different variants. First, a react-based zooming and panning component and 2nd vanilla JS-based zooming and panning library.

react-iv-viewer

react-iv-viewer is a React-based library for viewing images with advanced features like zooming, high-resolution image support, and full-screen viewing. It provides an easy way to integrate image viewing functionality into your React applications.

Features

• Smooth dragging and panning of images
• Support for touch devices
• Double tap to zoom in/zoom out
• Pinch in/out to control zoom
• Zooming with mouse wheel or buttons
• High-resolution image support
• Full-screen image viewing
• Customizable viewer dimensions
• TypeScript support

Demo

Codesandbox Demo: https://cc5q8h.csb.app/

Install

using npm

npm install react-iv-viewer

using yarn

yarn add react-iv-viewer

ES6

Image Viewer

import { ImageViewer } from 'react-iv-viewer';

Fullscreen Viewer

import { FullScreenImageViewer } from 'react-iv-viewer';

iv-viewer

iv-viewer is a zooming and panning plugin inspired by Google Photos for your web images. It provides a smooth and intuitive way to view images with features like full-screen mode, touch device support, and high-resolution image loading.

Features

• Smooth dragging and panning of images
• Support for touch devices
• Double tap to zoom in/zoom out
• Pinch in/out to control zoom
• Snap view for better panning and zooming experience
• Quick display of loaded images with progressive loading of high-quality images
• Exposed API to control zoom programmatically
• Custom events to listen for state changes

Install

Using npm

npm install iv-viewer --save

Using yarn

yarn add iv-viewer

Usage

ES6

Image Viewer

import ImageViewer from 'iv-viewer';
import 'iv-viewer/dist/iv-viewer.css';

const container = document.querySelector('#image-container');
const viewer = new ImageViewer(container, options);

viewer.load('images/low-res-img', 'images/hi-res-img');

Fullscreen Viewer

import { FullScreenViewer } from 'iv-viewer';
import 'iv-viewer/dist/iv-viewer.css';

const viewer = new FullScreenViewer(options);

viewer.show('images/low-res-img', 'images/hi-res-img');

Documentation

See full documentation of iv-viewer and react-iv-viewer

Like this

:star: this repo

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!