![](/img/trans.png)
[英]How to display image zoom popup beside image on hover using ngx-image-zoom in Angular 9?
[英]Unable to implement image zoom feature in Angular 6 project using ngx-image-zoom middlewre
我已经在angular项目中实现了ngx-image-zoom模块。 当我在 NgbModal 之外使用它时它工作正常。 但是,当我尝试在NgbModal中实现它时,会进行以下观察:
我对第三点有疑问。 当鼠标朝那个方向移动时,我希望我的图像垂直滚动。
请在下面的 stackblitz URL 中找到工作示例:
https://stackblitz.com/edit/dynamic-carousel-in-angular-p844lu?
我在这里发布的相同代码:
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"
});
}
}
提前致谢。 任何帮助表示赞赏!
我没有找到任何正常工作的 npm package 用于 Angular 图像缩放除了ng-img-magnifier 。 这是一个有效的演示。
安装:
npm i ng-img-magnifier
执行:
<ng-img-magnifier [thumbImage]='img'
[fullImage]='img2'> </ng-img-magnifier>
对于镜头、缩略图和缩放自定义,请尝试:
<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>
非常类似于 Amazon 或 W3school 图像缩放。 我希望这能解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.