drozhzhin-n-e / Ngx Pinch Zoom
Licence: mit
Module provides for image zooming and positioning with use of gestures on a touch screen.
Stars: ✭ 85
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngx Pinch Zoom
Zoom
Javascript library to do pinch zoom that preserves scale and rotation correctly.
Stars: ✭ 130 (+52.94%)
Mutual labels: pinch-to-zoom, touch
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+34628.24%)
Mutual labels: touch
Indoorsurfaceview
Android InDoorView dependent on Canvas
Stars: ✭ 947 (+1014.12%)
Mutual labels: touch
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (+775.29%)
Mutual labels: pinch-to-zoom
Chrome Virtual Keyboard
Touch-friendly Virtual Keyboard for Chrome browser
Stars: ✭ 35 (-58.82%)
Mutual labels: touch
React Native Sketch
🎨 A React Native <Sketch /> component for touch-based drawing.
Stars: ✭ 627 (+637.65%)
Mutual labels: touch
Photobrowser.forms
Full screen image viewer(Xamarin.Forms) that includes "pinch to zoom" and "swipe to dismiss" gestures.
Stars: ✭ 75 (-11.76%)
Mutual labels: pinch-to-zoom
Inputsystem
An efficient and versatile input system for Unity.
Stars: ✭ 1,013 (+1091.76%)
Mutual labels: touch
Hammer Slider
DISCONTINUED - HammerSlider touch is a lightweight infinite carousel plugin.
Stars: ✭ 21 (-75.29%)
Mutual labels: touch
Xjychart
iOS Chart. Support animation, click, scroll, area highlight.
Stars: ✭ 854 (+904.71%)
Mutual labels: touch
Android 3d Model Viewer
Android OpenGL 2.0 application to view 3D models. Published on Play Store
Stars: ✭ 809 (+851.76%)
Mutual labels: touch
System Alert Window Example
Example project showing use of SYSTEM_ALERT_WINDOW permission on Android 23+, with back button interception.
Stars: ✭ 39 (-54.12%)
Mutual labels: touch
React Native Fingerprint Scanner
Provide Fingerprint, Touch ID, and Face ID Scanner for React Native (Compatible with both Android and iOS)
Stars: ✭ 704 (+728.24%)
Mutual labels: touch
Keyboardhidemanager
Codeless manager to hide keyboard by tapping on views for iOS written in Swift
Stars: ✭ 57 (-32.94%)
Mutual labels: touch
Zoomlayout
2D zoom and pan behavior for View hierarchies, images, video streams, and much more, written in Kotlin for Android.
Stars: ✭ 688 (+709.41%)
Mutual labels: pinch-to-zoom
Zoomy
Zoomy is an easy to use pinch-to-zoom Android library
Stars: ✭ 842 (+890.59%)
Mutual labels: pinch-to-zoom
React Prismazoom
A pan and zoom component for React, using CSS transformations.
Stars: ✭ 29 (-65.88%)
Mutual labels: pinch-to-zoom
React Spring Lightbox
📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
Stars: ✭ 76 (-10.59%)
Mutual labels: touch
Swipe Listener
Zero-dependency, minimal swipe-gesture listener for the web.
Stars: ✭ 68 (-20%)
Mutual labels: touch
Pinch zoom for Angular
The module provides opportunities for image zooming in, zooming out and positioning with use of gestures on a touch screen.
Live demos and source code samples can be found on home page.
🔬️ Help make Pinch zoom better by answering a few questions.
Installation
Install the npm package.
npm i ngx-pinch-zoom
Import module:
import { PinchZoomModule } from 'ngx-pinch-zoom';
@NgModule({
imports: [ PinchZoomModule ]
})
Usage
For use, put your image inside the <pinch-zoom> container. Please, pay attention to the parameters of your viewport metatag. If you use Pinch Zoom, it is required to limit zooming of a web-page, by entering the following parameters: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">.
<pinch-zoom>
<img src="path_to_image" />
</pinch-zoom>
Properties
| name | type | default | description |
|---|---|---|---|
| transition-duration | number | 200 | Defines the speed of the animation of positioning and transforming. |
| limit-zoom | number, "original image size" | "original image size" | Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size. |
| minScale | number | 0 | Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with limitPan
|
| auto-zoom-out | boolean | false | Automatic restoration of the original size of an image after its zooming in by two fingers. |
| double-tap | boolean | true | Zooming in and zooming out of an image, depending on its current condition, with double tap. |
| disabled | boolean | false | Disable zoom. |
| disablePan | boolean | false | Turn off panning with one finger. |
| overflow | "hidden", "visible" | "hidden" |
hidden - the overflow is clipped, and the rest of the content will be invisible. visible - the overflow is not clipped. The content renders outside the element's box. |
| disableZoomControl | "disable", "never", "auto" | "auto" | Disable zoom controls. auto - Disable zoom controls on touch screen devices. never - show zoom controls on all devices. disable - disable zoom controls on all devices. |
| zoomControlScale | number | 1 | Zoom factor when using zoom controls. |
| backgroundColor | string | "rgba(0,0,0,0.85)" | The background color of the container. |
| limitPan | boolean | false | Stop panning when the edge of the image reaches the edge of the screen. |
| minPanScale | number | 1.0001 | Minimum zoom at which panning is enabled. |
| listeners | "auto", "mouse and touch" | "mouse and touch" | By default, subscriptions are made for mouse and touch screen events. The value auto means that the subscription will be only for touch events or only for mouse events, depending on the type of screen. |
| wheel | boolean | true | Scale with the mouse wheel. |
| wheelZoomFactor | number | 0.2 | Zoom factor when zoomed in with the mouse wheel. |
| autoHeight | boolean | false | Calculate the height of the container based on the width and height attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes width and height for the <img> tag. When setting the property value to true, a subscription to the window resize listener will be created. |
| draggableImage | boolean | true | Sets the attribute draggable to the <img> tag. |
Methods
| name | description |
|---|---|
| toggleZoom() | Image zooming in and out, depending on its current state. |
| destroy() | Unsubscribe from mouse events and touches, as well as remove added styles from the DOM tree. |
See the full documentation and examples on the home page.
Browser support
Pinch Zoom supports the most recent two versions of all major browsers: Chrome (including Android 4.4-10), Firefox, Safari (including iOS 9-13), and Edge.
Sponsors
Tested using Browserstack
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].