Greetings! I am relatively new to working with Angular and currently in the process of creating a website that requires lightbox galleries within each component. Upon seeking advice, ngx-lightbox was recommended as a solution for my photo gallery needs. However, I am facing difficulties implementing it successfully within the actual component.
I have followed the steps outlined in the documentation available at: https://www.npmjs.com/package/ngx-lightbox
After importing ngx-lightbox into my project, declaring it in angular.json, importing it in appmodule.ts, and adding the necessary HTML markup and component code, I encountered an error:
"ERROR in src/app/pages/graphic-design/graphic-design.component.ts(11,19): error TS2314: Generic type 'Array' requires 1 type argument(s). src/app/pages/graphic-design/graphic-design.component.ts(35,12): error TS2551: Property '_albums' does not exist on type 'GraphicDesignComponent'. Did you mean '_album'? src/app/pages/graphic-design/graphic-design.component.ts(41,30): error TS2551: Property '_albums' does not exist on type 'GraphicDesignComponent'. Did you mean '_album'?"
The component code is identical to the documentation except for the addition of two image objects. Unfortunately, due to these errors, I'm unable to verify if they work as intended.
import { Component, OnInit } from '@angular/core';
import { Lightbox } from 'ngx-lightbox';
declare var $:any;
@Component({
selector: 'app-graphic-design',
templateUrl: './graphic-design.component.html',
styleUrls: ['./graphic-design.component.css']
})
export class GraphicDesignComponent{
private _album: Array = [
{
src: "../assets/images/Roycreates-red.jpg",
caption: "test",
thumb: "../assets/images/Roycreates-red.jpg"
},
{
src: "../assets/images/Roycreates-red.jpg",
caption: "test",
thumb: "../assets/images/Roycreates-red.jpg"
}
];
constructor(private _lightbox: Lightbox) {
for (let i = 1; i <= 4; i++) {
const src = 'demo/img/image' + i + '.jpg';
const caption = 'Image ' + i + ' caption here';
const thumb = 'demo/img/image' + i + '-thumb.jpg';
const album = {
src: src,
caption: caption,
thumb: thumb
};
this._albums.push(album);
}
}
open(index: number): void {
// open lightbox
this._lightbox.open(this._albums, index);
}
close(): void {
// close lightbox programmatically
this._lightbox.close();
}
}
The markup code remains unchanged from the documentation. The image file sources are specified within the component code. I would greatly appreciate any clear guidance on rectifying the issues in my code to enable its functionality. This technology is new to me, and I look forward to setting it up correctly. Thank you!
Below is the reference markup code:
<div *ngFor="let image of _albums; let i=index">
<img [src]="image.thumb" (click)="open(i)"/>
</div>
P.S. I've noticed some gallery components offer options for small, medium, and large files. Do I need to specify these for every image uploaded to the gallery? Though ngx-lightbox doesn't seem to provide these options like ngx-gallery did, it left me curious about their purpose. Nevertheless, I am eager to get this setup running smoothly. Thank you!