angular-image-zoom-master

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.

License

MIT