Fullscreen lightbox in Metronics Angular

Hi,

Could you please try following these instructions? It seems this issue has been addressed before:

https://devs.keenthemes.com/question/how-can-i-use-lightbox-in-demo-5-angular-project

Thank you.

Hi Faizal,

Please have a look at error I am getting after following your instructions.

Error: src/app/pages/listings-details/listings-details.component.ts:14:29 - error TS7016: Could not find a declaration file for module 'fslightbox'. '/var/www/frontend/node_modules/fslightbox/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/fslightbox if it exists or add a new declaration (.d.ts) file containing declare module 'fslightbox';

14 import * as fslightbox from "fslightbox"; ~~~~~~~~~~~~

Error: src/app/pages/listings-details/listings-details.component.ts:303:8 - error TS2304: Cannot find name 'refreshFsLightbox'.

303 refreshFsLightbox(); ~~~~~~~~~~~~~~~~~

✖ Failed to compile.

Thanks Faizal for the information I will follow the instructions that you have suggested and will let you know is it working or not.

Hi

1. You can install fslightbox plugin for your Angular

<pre> npm install fslightbox </pre>

2. Include FSLightbox in Your Component

In your your-component.component.ts

<pre> import { Component, OnInit, AfterViewInit } from '@angular/core'; import * as fslightbox from 'fslightbox'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponentComponent implements OnInit, AfterViewInit { ngOnInit(): void {} ngAfterViewInit(): void { // Initialize FSLightbox after the view is rendered refreshFsLightbox(); } } </pre>

In your your-component.component.html

<pre> <a data-fslightbox href="path/to/your/image.jpg"> <img src="path/to/your/image.jpg" alt="Image"> </a> </pre>

Explanation:

The import * as fslightbox from 'fslightbox'; line brings the FSLightbox library into your Angular component. The ngAfterViewInit lifecycle hook ensures that FSLightbox is initialized only after the component's view has been fully rendered. The data-fslightbox attribute on your links or image elements tells FSLightbox to handle them. You can customize the behavior with additional attributes (see the FSLightbox documentation). The refreshFsLightbox() function is a global function provided by the FSLightbox library. It is used to refresh the lightbox instance whenever new elements with the data-fslightbox attribute are added to the DOM.

Example - Adding Multiple Images

<pre> <div> <a data-fslightbox="gallery" href="image1.jpg"><img src="image1.jpg" alt="Image 1"></a> <a data-fslightbox="gallery" href="image2.jpg"><img src="image2.jpg" alt="Image 2"></a> <a data-fslightbox="gallery" href="image3.jpg"><img src="image3.jpg" alt="Image 3"></a> </div> </pre>

Yes

Hi,

Sorry for the late reply.

Could you please provide more info? Are you referring to Metronic 8 Angular and want to use this FSlightbox plugin?

Regards.