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

npm install fslightbox

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

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

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

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.