ngx-image-zoom-jlatipov

v0.4.4

[![npm version](http://img.shields.io/npm/v/ngx-image-zoom.svg)](https://npmjs.org/package/ngx-image-zoom)

NPM

README

GitHub

Website

MIT

Latest version published 11 months ago

    npm install ngx-image-zoom-jlatipov

We couldn't find any similar packages Browse all packages

Package Health Score

58 / 100

Popularity
Limited
Maintenance
Inactive
Security
No known security issues
Community
Sustainable

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Limited

Weekly Downloads (0)

Dependents: 1
GitHub Stars: 84
Forks: 43
Contributors: 6

The npm package ngx-image-zoom-jlatipov receives a total of 0 downloads a week. As such, we scored ngx-image-zoom-jlatipov popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package ngx-image-zoom-jlatipov, we found that it has been starred 84 times, and that 1 other projects on the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

0.4.4

Indirect Vulnerabilities

0.4.4

License Risks

0.4.4

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security Policy: No

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

We found a way for you to contribute to the project! Looks like ngx-image-zoom-jlatipov is missing a security policy.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test ngx-image-zoom-jlatipov

Fix it in your project with Snyk!

Maintenance

Inactive

Commit Frequency

Open Issues: 33
Merged PR: 11
Open PR: 2
Last Commit: 11 months ago

Further analysis of the maintenance status of ngx-image-zoom-jlatipov based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

We found that ngx-image-zoom-jlatipov demonstrates a positive version release cadence with at least one new version released in the past 12 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 6
Funding: No
License: MIT

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like ngx-image-zoom-jlatipov is missing a Code of Conduct.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 11 months
Dependencies: 0 Direct / 0 Total
Versions: 4
Install Size: 66.9 kB
Dist-tags: 1
# of Files: 10
Maintainers: 1
TS Typings: No

ngx-image-zoom-jlatipov has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

ngx-image-zoom

Project status

Still in early development, more features are planned and incoming. Should be in a working state right now but it's not tested in lots of different setups yet.

Demonstration of available features available here.

About

NgxImageZoom is inspired by angular2-image-zoom and JQuery libraries such as jQuery Zoom and elevateZoom-plus but a pure Angular2+ implementation of similar concepts. This plugin works with both URLs to images and in-line images (Data URI).

Available options

All settings except thumbImage are optional. If no fullImage is provided the thumbImage will be used as the high resolution version as well.

Option	Default value	Description
thumbImage	none	(Required) The smaller version of the image that will be shown when there's no interaction by the user.
fullImage	none	The full resolution version of the image to be used when zooming. If not supplied thumbImage will be used.
magnification	1	The zoom factor to be used by default. 1 means we use the fullImage at its actual resolution.
zoomMode	'hover'	The mode of zooming to use, these are explained in a table below.
enableScrollZoom	false	Boolean that toggles if the mouse wheel should be captured when hovering over the image to adjust magnification.
scrollStepSize	0.1	When using scroll zoom this setting determines how big steps each scroll changes the zoom.
enableLens	false	If enabled only a small portion around the mouse cursor will actually magnify instead of the entire image area.
lensWidth	100	Width of the lens, if enabled.
lensHeight	100	Height of the lens, if enabled.
circularLens	false	Make the lens circular instead of square. This will only look good if width and height are equal.
minZoomRatio	baseRatio	Lower limit on how much zoom can be applied with scrollZoom enabled. See below for details.
maxZoomRatio	2	Upper limit on how much zoom can be applied with scrollZoom enabled. See below for details.
isInsideStaticContainer	false	Set to `true` if the thumbnail is inside a container, to which `position: static` is applied (e.g. a modal window). This is required to avoid zoom position being calculated incorrectly.

Zoom modes

Mode	Description
hover	Whenever the mouse cursor moves over the thumbnail it will show the zoomed image until it leaves the thumbnail.
click	Similar to hover but it only starts zooming if the user clicks the image. Moving the cursor away from the image disables it again.
toggle	A click in the image will zoom at the point of the cursor. Another click will restore the small image.
hover-freeze	First click enables hover mode, second click freezes the zoomed image where it is, third click restores thumbnail.

Zoom ratio

The zoom ratio used in the minZoomRatio and maxZoomRatio settings refer to the relative size of the thumbnail and the full size image. The baseRatio default value is the calculated ratio that would make the zoomed image equal in size to the thumbnail. For example, if the full size image is 10x larger than the thumbnail, then minZoomRatio will default to 0.1, as in the full size image can at its smallest be shown at 0.1 times its original size. The default value for maxZoomRatio being 1 means the largest the fullSize image can appear is twice its original size.

Available output

The component outputs the follow events that can be triggered on.

Event name	Description
onZoomScroll	Whenever the user changes the zoom level using the scroll wheel this event will fire with the current zoom ratio (see above).
onZoomPosition	When the point on where the zoom is focused changes this event emits a Coord event (interface exported from the module) with X/Y in pixels relative thumbnails top left corner. Practically whenever the user moves the mouse cursor over the image.

Installation

To install this library, run:

$ npm install ngx-image-zoom --save

Using this library

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { NgxImageZoomModule } from 'ngx-image-zoom';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageZoomModule.forRoot() // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use its component in your Angular application:

<!-- You can now use NgxImageZoom component in app.component.html -->
<h1>
  {{title}}
</h1>
<ngx-image-zoom
    [thumbImage]=myThumbnail
    [fullImage]=myFullresImage
></ngx-image-zoom>

License