I am trying to implement medium-zoom from https://www.npmjs.com/package/medium-zoom

These are the steps I followed

1. ng new medium_zoom_test (Angular 13) with routing & css
2. npm install medium-zoom
3. image is kept in assets

app.component.html

<h1>Zoom test</h1>
<img  width="50%" src="assets/image.svg">

app.component.ts

import { Component } from '@angular/core';
import mediumZoom from 'medium-zoom';

mediumZoom('.zoomy', {
  margin: 40,
  background: '#ffffff',
  scrollOffset: 40
})

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'medium_zoom_test';
}

On serving the application the webpage with image is visible. However, there's no zoom icon on hover and the image won't zoom on click. It's just a normal webpage with no change.

Any alternatives to implement the zooming of images are welcome too.

CodePudding user response：

I don't think mediumZoom will work when the passed selector has no corresponding element in the DOM. What I mean is where you call mediumZoom function the component is not attached to the DOM yet. If you want to guarantee that you need to call it on ngOnInit lifecycle hook. Or you can do better which is to define a directive that applies the zoom affect like this :

import mediumZoom from 'medium-zoom';

@Directive({
  selector: '[appZoomie]'
})
export class ZoomieDirective {

  constructor(private el: ElementRef) {
    mediumZoom(el.nativeElement, {
      margin: 40,
      background: '#ffffff',
      scrollOffset: 40
    })
   }
}

And use it like this :

<img appZoomie src=".."/>

Stackblitz