npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-pinch-zoom-x

v14.0.0

Published

Pinch zoom component for Angular.

Downloads

92

Readme

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 ng-pinch-zoom-x

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 | false | 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.

Author services

Are you interested in this library but lacks features? Write to the author, he can do it for you.

Sponsors

Tested using Browserstack

Browserstack