ngx-image-zoom

Project status

Still in early development, more features are planned and incoming. Should be in a working state right now but it's not tested in lots of different setups yet.

Demonstration of available features available here.

About

NgxImageZoom is inspired by angular2-image-zoom and JQuery libraries such as jQuery Zoom and elevateZoom-plus but a pure Angular2+ implementation of similar concepts. This plugin works with both URLs to images and in-line images (Data URI).

Available options

All settings except thumbImage are optional. If no fullImage is provided the thumbImage will be used as the high resolution version as well.

Zoom modes

Zoom ratio

The zoom ratio used in the minZoomRatio and maxZoomRatio settings refer to the relative size of the thumbnail and the full size image. The baseRatio default value is the calculated ratio that would make the zoomed image equal in size to the thumbnail. For example, if the full size image is 10x larger than the thumbnail, then minZoomRatio will default to 0.1, as in the full size image can at its smallest be shown at 0.1 times its original size. The default value for maxZoomRatio being 1 means the largest the fullSize image can appear is twice its original size.

Available output

The component outputs the follow events that can be triggered on.

Installation

To install this library, run:

$ npm install ngx-image-zoom --save

Using this library

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { NgxImageZoomModule } from 'ngx-image-zoom';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageZoomModule.forRoot() // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use its component in your Angular application:

<!-- You can now use NgxImageZoom component in app.component.html -->
<h1>
  {{title}}
</h1>
<ngx-image-zoom
    [thumbImage]=myThumbnail
    [fullImage]=myFullresImage
></ngx-image-zoom>

License

MIT © Mathias Wittlock