malaman / React Image Zoom
Licence: mit
React component for desktop browsers for image zoom on mouse hover
Stars: ✭ 97
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Image Zoom
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: ✭ 186 (+91.75%)
Mutual labels: image, zoom, browser
Vue Product Zoomer
Zoom Prodct Image, useful for e-shop website
Stars: ✭ 248 (+155.67%)
Mutual labels: image, zoom
Flutter advanced networkimage
flutter advanced network image provider
Stars: ✭ 282 (+190.72%)
Mutual labels: image, zoom
Zoomy
Adds seamless scrollView and instagram like zooming to UIImageViews in any view hierarchy.
Stars: ✭ 130 (+34.02%)
Mutual labels: image, zoom
Imageviewer
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+1847.42%)
Mutual labels: image, zoom
Medium Zoom
🔎🖼 A JavaScript library for zooming images like Medium
Stars: ✭ 2,799 (+2785.57%)
Mutual labels: image, zoom
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (+635.05%)
Mutual labels: image, zoom
Mediumlightbox
Nice and elegant way to add zooming functionality for images, inspired by medium.com
Stars: ✭ 671 (+591.75%)
Mutual labels: image, zoom
Stfalconimageviewer
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+1687.63%)
Mutual labels: image, zoom
Hxphotopicker
图片/视频选择器 - 支持LivePhoto、GIF图片选择、3DTouch预览、在线下载iCloud上的资源、编辑图片/视频、浏览网络图片 功能 Imitation wx photo/image picker - support for LivePhoto, GIF image selection, 3DTouch preview, Download the resources on iCloud online, browse the web image function
Stars: ✭ 2,363 (+2336.08%)
Mutual labels: image, browser
React Image Magnify
A responsive image zoom component designed for shopping sites.
Stars: ✭ 391 (+303.09%)
Mutual labels: image, zoom
Photobrowser
Elegant photo browser in Swift. 图片与视频浏览器。
Stars: ✭ 975 (+905.15%)
Mutual labels: image, browser
Extended image
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.
Stars: ✭ 1,021 (+952.58%)
Mutual labels: image, zoom
Pyautolens
PyAutoLens: Open Source Strong Gravitational Lensing
Stars: ✭ 90 (-7.22%)
Mutual labels: image
react-image-zoom
Overview
React component for desktop browsers for image zoom on mouse hover.
Demo
Install
npm install react-image-zoom --save
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import ReactImageZoom from 'react-image-zoom';
const props = {width: 400, height: 250, zoomWidth: 500, img: "1.jpg"};
ReactDOM.render(<ReactImageZoom {...props} />, document.getElementById('react-app'));
propTypes
- width (number) - width of the source image (required)
- height (number) - height of the source image. If not provided, browser calculated height is used (optional).
- zoomWidth (number) - width of the zoomed image. Zoomed image height equals source image height(optional if scale param is provided)
- img (string) - url of the source image. Provided if container does not contain img element as a tag(optional)
- scale (number) - zoom scale. if not provided, scale is calculated as natural image size / image size, provided in params (optional if zoomWidth param is provided)
- offset (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
- zoomStyle (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')(optional)
- zoomLensStyle (string) custom style applied to to zoom lents (i.e. 'opacity: 0.4;background-color: gray;')
-
zoomPosition (string) - position of zoomed image. It can be:
top
,left
,bottom
,original
or the defaultright
.
RouteMap
- [ ] add sourceImg, zoomedImg properties to make it possible to use different images for source and zoomed images
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].