In this article, we discuss how to open image gallery in our angular application. First, we need to install “Ngx-Lightbox” module in our application.
npm install --save ngx-lightbox
After installing module we need to import their CSS in our angular.json file
.....
{
"styles": [
"./node_modules/ngx-lightbox/lightbox.css",
...
],
}
.....
After adding CSS now we need to import module in our “app.module.ts” file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
//lightbox
import { LightboxModule } from 'ngx-lightbox';
@NgModule({
imports: [ BrowserModule, FormsModule, LightboxModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
We need to create albums for display images, each albums item contains maily 3 proertyies.
1) src: Required field – it contains main image path when click on the thumbnail or text.
2) caption: Optional field – Name of the image display below the image.
3) thumb: Optional field – small image of the main.
Below is the running embedded code for open image gallery.
Spread the love
4