Lightbox Question

Topic: Lightbox Question

m_mendez pro asked 6 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 6 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>
<pre><div class="row">

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

</div></pre>
</div>
Then to your component.ts file please add those lines:
<div>
<pre>import { ViewChild, HostListener } from '@angular/core';</pre>
</div>
<div>import { ImageModalComponent } from './../../path-to-your-lightbox-component';</div>
<div></div>
<div>
<div>
<pre>@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();

}</pre>
</div>
</div>
After saving changes, everything should works fine.

Best Regards,

Damian

Please insert min. 20 characters.

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

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

m_mendez

Pro User 0Support score
1Questions 0Answers 0Snippets