Narnia's Poofy Meatcleaver

    angular-image-zoom-master
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    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

    Install

    npm i angular-image-zoom-master

    DownloadsWeekly Downloads

    3

    Version

    0.0.4

    License

    ISC

    Unpacked Size

    58.2 kB

    Total Files

    16

    Last publish

    Collaborators

    • onlykundan