Lightbox Question

Topic: Lightbox Question

m_mendez pro asked 7 years ago

Hello, Currently, I am using the Lightbox Gallery in my Angular 5 Project, it works perfectly, however when I try to access from a smartphone, the arrows disappear and I cannot go to the next image or the previous image. Any solution? Thanks!

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hello m_mendez, On mobile view in lightbox, there's no navigation buttons. You're changing slides using swipeleft / swiperight events. For proper working swipes on your lightbox, please import hammerJS using this tutorial: https://mdbootstrap.com/angular/advanced/mobile/ . Then to your lightbox html markup please add identifier: #lightbox,

<div class="row">

<mdb-image-modal #lightbox [modalImages]="imagesBasic" type="no-margin"></mdb-image-modal>

</div>

Then to your component.ts file please add those lines:

import { ViewChild, HostListener } from '@angular/core';

import { ImageModalComponent } from './../../path-to-your-lightbox-component';

@ViewChild('lightbox') public el: any;

@HostListener('swipeleft', ['$event']) public swipePrev(event: any) {

this.el.prevImage();

}

@HostListener('swiperight', ['$event']) public swipeNext(event: any) {

this.el.nextImage();

}

After saving changes, everything should works fine. Best Regards, Damian

m_mendez pro commented 7 years ago

Thanks for the solution. Now, it Works perfectly.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

m_mendez

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets