Открыть изображение nxg-owl-carousel-o в лайтбоксе - PullRequest
Новая
       48

Открыть изображение nxg-owl-carousel-o в лайтбоксе

0 голосов
/ 24 апреля 2020

Я использую версию Angular 8 Owl Carousel (2.1.0), и мне было интересно, есть ли возможность щелкнуть изображение внутри слайдера, чтобы открыть его в лайтбоксе? Я пробовал несколько способов, но ни один из них не работал должным образом ... Если это невозможно, кто-то может порекомендовать какой-нибудь другой плагин с такой опцией? 

<owl-carousel-o [options]="customOptions" class="slider">
    <!--*ngFor="let image of images"-->
    <ng-template carouselSlide>
        <img src="http://placekitten.com/500/300" alt="" class="slider-img" />
    </ng-template>
    <ng-template carouselSlide>
        <img src="http://placekitten.com/400/400" alt="" class="slider-img" />
    </ng-template>
    <ng-template carouselSlide>
        <img src="http://placekitten.com/400/300" alt="" class="slider-img" />
    </ng-template>
</owl-carousel-o>

ngOnInit() {
    this.customOptions = {
        loop: true,
        mouseDrag: true,
        touchDrag: true,
        pullDrag: true,
        autoHeight: true,
        dots: false,
        autoplay: true,
        autoplaySpeed: 300,
        autoplayHoverPause: true,
        navSpeed: 700,
        navText: ['', ''],
        responsive: {
            0: {
                items: 2
            },

            300: {
                items: 4
            }
        },
        nav: false
    };
}

Редактировать: Устранено с привязкой события клика по тегу img 

<ng-template #element carouselSlide>
    <img src="http://placekitten.com/400/400" alt="" class="slider-img" (click)="openSomeLightboxDialog($event)" />
</ng-template>

1 Ответ

0 голосов
/ 24 апреля 2020

Редактировать: Решено с привязкой события клика по тегу img 

<ng-template #element carouselSlide>
    <img src="http://placekitten.com/400/400" alt="" class="slider-img" (click)="openSomeLightboxDialog($event)" />
</ng-template>
...