Estoy tratando de implementar un zoom medio desde https://www.npmjs.com/package/medium-zoom
Estos son los pasos que seguí
ng new medium_zoom_test (Angular 13) con enrutamiento y cssnpm install medium-zoomaplicación.componente.html
<h1>Zoom test</h1> <img class="zoomy" width="50%" src="assets/image.svg">aplicación.componente.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'; }Al servir la aplicación se ve la página web con la imagen. Sin embargo, no hay un ícono de zoom al pasar el mouse por encima y la imagen no se amplía al hacer clic. Es solo una página web normal sin cambios.
Cualquier alternativa para implementar el zoom de imágenes también es bienvenida.
No creo que mediumZoom funcione cuando el selector pasado no tiene un elemento correspondiente en el DOM. Lo que quiero decir es que cuando llamas a la función mediumZoom , el componente aún no está conectado al DOM. Si desea garantizar que necesita llamarlo en el gancho del ciclo de vida ngOnInit . O puede hacerlo mejor, que es definir una directiva que aplique el efecto de zoom de esta manera:
import mediumZoom from 'medium-zoom'; @Directive({ selector: '[appZoomie]' }) export class ZoomieDirective { constructor(private el: ElementRef) { mediumZoom(el.nativeElement, { margin: 40, background: '#ffffff', scrollOffset: 40 }) } }Y utilízalo así:
<img appZoomie src=".."/>