I'm facing an issue while implementing Ekko lightbox in my angular project. Specifically, I want to use it in a certain component but I am unsure about how to import the necessary files into that component.
After installing Ekko via NPM, I found all the files listed under "node_modules/Ekko-lightbox".
The documentation for Ekko can be accessed here:
Below is my Angular Component code. (I have already imported Jquery and added the function code within NgOnInIt)
import { Component, OnInit } from '@angular/core';
declare var $:any;
@Component({
selector: 'app-graphic-design',
templateUrl: './graphic-design.component.html',
styleUrls: ['./graphic-design.component.css', '/node_modules/ekko-lightbox/dist/ekko-lightbox.css']
})
export class GraphicDesignComponent implements OnInit {
constructor() { }
ngOnInit() {
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
}
}
I have also included the HTML sample code provided in the documentation in my component's HTML file
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
Although the image pops up, clicking on it doesn't trigger any action and it doesn't appear responsive either.
Moreover, despite linking the scripts and CSS files in my angular.json file, the functionality still isn't working as expected.