angular-image-zoom-master
v0.0.5
Published
This is a very simple angular image zoom package
Downloads
94
Maintainers
Readme
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
npm i angular-image-zoom-master
Usage
// 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 { }
//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;
}
<!--in app.component.html-->
<lib-angular-image-zoom-master
[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">
<!--dynamicly change index to change image -->
</lib-angular-image-zoom-master>
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.