About

Hello my name is Kundan Kumar i am working on angular since last 3 year I always feel angular doesn't have a good image zoom package like react js.
so I made this package for angular developers.

for any query contact me on LinkedIn KUNDAN KUMAR

Installation

``bash
npm i angular-image-zoom-master
`

Usage

`typescript

// import module on your app.module.ts or router.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularImageZoomMasterModule } from 'angular-image-zoom-master';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
AngularImageZoomMasterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

`css
//add this style in styles.scss

* {
margin: 0;
padding: 0;
}
.image-zoom-master-container{
width: 500px;
position: relative;

}

.image-zoom-master-image{
width: 100%;
height: auto
}

.image-zoom-master-lens{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
box-shadow: 0px 0px 4px #504e4e;
cursor: crosshair;
background-color:rgba(255, 255, 255, 0.6)
}

.image-zoom-master-result{
position: absolute;
left: calc(100% + 5px);
top: 0px;
border: 1px solid #ccc;
width: 100%;
height: 100%;
background-repeat: no-repeat;
transition: 0.1s;
box-shadow: 5px 5px 10px #ccc;
}
`

`xml


[ImageUrl]="[
'https://wallpaperaccess.com/full/760289.jpg',
'https://wallpapercave.com/wp/wp3202677.jpg',
'https://images3.alphacoders.com/823/thumb-1920-82317.jpg',
'https://wallpaperaccess.com/full/138728.jpg'
]"
[Index]="0">


``

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT