1.0.5 • Published 5 years ago
angular-easy-zoom v1.0.5
EasyZoom
This library was generated with Angular CLI version 7.2.0.
Description
EasyZoom is crated based on jQuery Zoom and elevateZoom-plus, but it's fully angular based open source code. You can use your projects. Demo
Installation
To install this library, run:
npm i angular-easy-zoomUsage
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EasyZoomModule } from 'angular-easy-zoom';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
EasyZoomModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }Once the library is imported, you can use its component in your Angular application:
<lib-easy-zoom
[thumbImage]="smallImage"
[fullImage]="fullImage"
[imageTitle]="Welcome"
[enableLens]="true"
[enableScrollZoom]="true"
[lensWidth]="150"
[lensHeight]="150"
[circularLens]="true"
[maxZoomRatio]="5"
[scrollStepSize]="0.1"
>
</lib-easy-zoom>Options
| Option | Default value | Description |
|---|---|---|
| thumbImage | none | (Required) Thumbnail for zoom image. |
| Content Cell | Content Cell | (Required) Original High quality image, it's required when user zoom the image. |
| imageTitle | none | Alt tag of image. |
| enableLens | false | If enabled only a small portion around the mouse cursor will actually magnify instead of the entire image area. |
| enableScrollZoom | false | Boolean that toggles if the mouse wheel should be captured when hovering over the image to adjust magnification. |
| lensWidth | 100 | Width of the lens, if enabled. |
| lensHeight | 100 | Height of the lens, if enabled. |
| lensColor | #000 | Border color of the lens, if enabled. |
| maxZoomRatio | 2 | Upper limit on how much zoom can be applied with scrollZoom enabled. See below for details. |
| minZoomRatio | baseRatio | Lower limit on how much zoom can be applied with scrollZoom enabled. See below for details. |
| circularLens | false | Make the lens circular instead of square. This will only look good if width and height are equal. |
Donate!
Like my Work! Donate