Unable to implement image zoom feature in Angular 6 project using ngx-image-zoom middlewre

Question

I have implemented the ngx-image-zoom module in the angular project. It is working fine when I am using it outside NgbModal. But, when I am trying to implement it inside NgbModal following observations are made:

1. Image able to zoom inside NgbModal
2. Image is able to respond to the horizontal movement of the mouse and able to scroll horizontally
3. But When the mouse is moved vertically over the image the vertical shift/scroll is not working

I am having a problem with 3rd point. I want my image to scroll vertically when the mouse is moved in that direction.

Please find the working example in below stackblitz URL:

https://stackblitz.com/edit/dynamic-carousel-in-angular-p844lu?

Same code I have posted here:

carousel.component.html:

<div class="container">
  <div class="row">
    <div class="col-md-12 py-3">
      <h3 class="pb-2">Without NgbModal working fine</h3>
      <h6 class="pb-2">Able to scroll image horizontally and Vertically</h6>
      <ngb-carousel *ngIf="event_list">
        <ng-template ngbSlide *ngFor="let event of past_events">
          <ngx-image-zoom [thumbImage]=event.img [fullImage]=event.img [magnification]="1" [enableScrollZoom]="true"
            [zoomMode]="click" [enableLens]=false>></ngx-image-zoom>
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12 py-3">
      <h3 class="pb-2">With NgbModal having problem</h3>
      <h6 class="pb-2">Please click on image below to open NgbModel</h6>
      <h6 class="pb-2">Inside model-> image is zoomed properly and responding to horizontal movement of mouse. But,
        unable to respond for vertical mouse movement</h6>

      <ngb-carousel data-interval="false" class="carousel-sm" [ngClass]="[customClass ? customClass : '']"
        [showNavigationArrows]="past_events.length > 1 ? true : false" [showNavigationIndicators]="false">
        <ng-template ngbSlide *ngFor="let event of past_events">
          <div class="row img-parent">
            <div class="col-12 img-container">
              <img src="{{ event?.img }}" class="img-sm" (click)="openModal(content, event?.img)" />
            </div>
          </div>
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>
<!-- ///////////// MODAL ////////////// -->

<ng-template #content let-c="close">
  <div class="modal-header">
    <button type="button" class="btn btn-close" (click)="c('Close click')" aria-label="Close">
      <i class="icon material-icons notranslate">close</i>
    </button>
  </div>
  <div class="modal-body">
    <img class="img-lg" *ngIf="past_events?.length < 1; else carouselLg" src="{{ img }} " />
  </div>
</ng-template>

<ng-template #carouselLg>
  <ngb-carousel data-interval="false" class="" [showNavigationArrows]="past_events.length > 1 ? true : false"
    [showNavigationIndicators]="false" [activeId]="activeId">
    <ng-template ngbSlide *ngFor="let event of past_events">
      <ngx-image-zoom [thumbImage]=event.img [fullImage]=event.img [magnification]="1" [enableScrollZoom]="true"
        [zoomMode]="click" [enableLens]=false>
      </ngx-image-zoom>
    </ng-template>
  </ngb-carousel>
</ng-template>

carousel.component.ts :

import { Component, OnInit } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
@Component({
  selector: "app-carousel",
  templateUrl: "./carousel.component.html",
  styleUrls: ["./carousel.component.css"]
})
export class CarouselComponent implements OnInit {
  public activeId: string;
  public found: boolean;

  constructor(private modalService: NgbModal) {
    this.found = false;
  }
  event_list = [
    {
      event: " Event 1",
      eventLocation: "Bangalore",
      eventDescription:
        "In bangalore, first event is going to happen. Please be careful about it",
      img: "https://picsum.photos/900/500?random&t=1",
      eventStartDate: new Date("2019/05/20"),
      eventEndingDate: new Date("2019/05/24")
    },
    {
      event: " Event 2",
      eventLocation: "Dubai",
      eventDescription:
        "Dubai is another place to host so,e, first event is going to happen. Please be careful about it",
      img: "https://picsum.photos/900/500?random&t=3",
      eventStartDate: new Date("2019/07/28"),
      eventEndingDate: new Date("2019/07/30")
    },
    {
      event: " Event 3",
      eventLocation: "New York",
      eventDescription: "NewYork sits on top of event hosting",
      img: "https://picsum.photos/900/500?random&t=4",
      eventStartDate: new Date("2020/05/20"),
      eventEndingDate: new Date("2020/05/24")
    },
    {
      event: " Event 4",
      eventLocation: "Singapore",
      eventDescription: "Singapore is another great hosting city",
      img: "https://picsum.photos/900/500?random&t=6",
      eventStartDate: new Date("2018/05/20"),
      eventEndingDate: new Date("2018/05/24")
    },
    {
      event: " Event 5",
      eventLocation: "Berlin",
      eventDescription: "Berlin is best place to hang on",
      img: "https://picsum.photos/900/500?random&t=7",
      eventStartDate: new Date("2017/07/10"),
      eventEndingDate: new Date("2017/08/14")
    },
    {
      event: " Event 6",
      eventLocation: "Mumbai",
      eventDescription: "Mumbai is hub of startups",
      img: "https://picsum.photos/900/500?random&t=8",
      eventStartDate: new Date(),
      eventEndingDate: new Date()
    },
    {
      event: " Event 7",
      eventLocation: "Barcelona",
      eventDescription: "Barcelona is another good city",
      img: "https://picsum.photos/900/500?random&t=6",
      eventStartDate: new Date(),
      eventEndingDate: new Date()
    }
  ];

  upcoming_events = this.event_list.filter(
    event => event.eventStartDate > new Date()
  );
  past_events = this.event_list.filter(
    event => event.eventEndingDate < new Date()
  );
  current_events = this.event_list.filter(
    event =>
      event.eventStartDate >= new Date() && event.eventEndingDate <= new Date()
  );

  ngOnInit() {}

  openModal(content: any, activeId: string): void {
    // select the same active img for carousel in the modal that the small carousel
    this.activeId = activeId;
    this.modalService.open(content, {
      size: "lg",
      centered: true,
      windowClass: "modal-piece-gallery"
    });
  }
}

Thanks in advance. Any help is appreciated !!!

Answer 1

I didn't find any properly working npm package for Angular image zoom except ng-img-magnifier . Here is a working DEMO .

Install:

npm i ng-img-magnifier

Implementation:

<ng-img-magnifier [thumbImage]='img'
[fullImage]='img2'> </ng-img-magnifier>

For lens, thumbnail, and zoom customisation try:

    <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>

Very similar to Amazon or W3school image zoom. I hope this will resolve your issue.