Skip to content

A zooming and panning plugin inspired by google photos for your web images.

License

Notifications You must be signed in to change notification settings

s-yadav/iv-viewer

Repository files navigation

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

⭐ this repo

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Sudhanshu Yadav
Sudhanshu Yadav

💻📖🙎‍♂️
Manav Gopal
Manav Gopal

💻📖🛠️
Daniel Jagszent
Daniel Jagszent

💻🛠️
Ruchika
Ruchika

📖
Amrit Kahlon
Amrit Kahlon

📖
10000
10000

📖

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