Search code examples
javascriptangularlightboxowl-carouselowl-carousel-2

Open nxg-owl-carousel-o image in lightbox


I am using the Angular 8 version of Owl Carousel (2.1.0), and was wondering is there an option to click the image inside the slider to open it in a lightbox? I tried several ways but none were really working as expected... If it is not possible, could someone recommend some other plugin which has this option..?

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

Edit: Resolved it with binding click event on img tag

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

Solution

  • Edit: Resolved it with binding click event on img tag

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