Блог

Главная - Вопросы по программированию - Как отобразить всплывающее окно увеличения изображения рядом с изображением при наведении курсора мыши с помощью ngx-image-zoom в Angular 9?

Как отобразить всплывающее окно увеличения изображения рядом с изображением при наведении курсора мыши с помощью ngx-image-zoom в Angular 9?

#javascript #html #css #angular9 #ngx-bootstrap

#javascript #HTML #css #angular9 #ngx-bootstrap

Вопрос:

image-zoom для масштабирования изображения продукта при наведении курсора мыши, но я хочу, чтобы при наведении курсора мыши на это изображение рядом с изображением появлялся div, отображающий увеличенное изображение, как у нас на Amazon. Я не могу понять, как это сделать, используя ngx-image-zoom.

app.html

   <h1>
    {{title}}
  </h1>
  <lib-ngx-image-zoom
      [thumbImage]=myThumbnail
      [fullImage]=myFullresImage
   ></lib-ngx-image-zoom>

app.ts

     myThumbnail="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg";
  myFullresImage="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg";

Или есть какой-либо другой плагин или библиотека, которые я могу использовать для простой реализации этого?

Ответ №1:

Импортировали ли вы ngximagezoomodule в свой модуль, как указано на странице npm этой библиотеки?

Комментарии:

1. ДА. Обычное масштабирование работает, но я хочу реализовать что-то вроде всплывающего окна масштабирования для этого

Ответ №2:

Попробуйте использовать пакет ng-img-magnifier npm. Вот рабочая ДЕМОНСТРАЦИЯ. Очень прост в реализации и полностью настраивается.

 <ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
    [top]='top' [right]='right'
    [lensWidth]='lensewidth' [lensHeight]='lensheight'
    [resultWidth]='resultWidth' [resultHeight]='resultheight'
    [imgWidth]='imgWidth' [imgHeight]='imgheight'>
</ng-img-magnifier>