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
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.
Codesandbox Demo: https://cc5q8h.csb.app/
using npm
npm install react-iv-viewer
using yarn
yarn add react-iv-viewer
Image Viewer
import { ImageViewer } from 'react-iv-viewer';
Fullscreen Viewer
import { FullScreenImageViewer } from 'react-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.
Using npm
npm install iv-viewer --save
Using yarn
yarn add iv-viewer
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');
See full documentation of iv-viewer and react-iv-viewer
Thanks goes to these wonderful people (emoji key):
Sudhanshu Yadav π»ππββοΈ |
Manav Gopal π»ππ οΈ |
Daniel Jagszent π»π οΈ |
Ruchika π |
Amrit Kahlon π |
10000 π |
This project follows the all-contributors specification. Contributions of any kind welcome!