Welcome folks today in this blog post we will be using the lightgallery.js
library to create responsive lightbox image gallery
with editor and controls in angular using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to create a new angular
project using the below command as shown below
ng new sampleapp
cd sampleapp
And after that you need to install the below library
using the below command as shown below
npm i lightgallery
And now you will see the below directory
structure of the angular app as shown below
And after that you need to go to app.module.ts
file of your angular project and copy paste the below lines of code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { LightgalleryModule } from 'lightgallery/angular'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, LightgalleryModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
As you can see we are including the lightGalleryModule
inside the imports array so that we can use this library inside the angular application.
Adding the HTML Template
Now we need to go to app.component.html
file and add the below lines of the html
code as shown below
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div> <lightgallery [settings]="settings"> <a href="https://picsum.photos/id/1018/1000/600" data-lg-size="1000-600" data-lg-thumbnail="https://picsum.photos/id/1018/250/150"> <img src="https://picsum.photos/id/1018/250/150"> </a> <a href="https://picsum.photos/id/102/1000/600" data-lg-size="1000-600" data-lg-thumbnail="https://picsum.photos/id/102/250/150"> <img src="https://picsum.photos/id/102/250/150"> </a> <a href="https://picsum.photos/id/1005/1000/600" data-lg-size="1000-600" data-lg-thumbnail="https://picsum.photos/id/1005/250/150"> <img src="https://picsum.photos/id/1005/250/150"> </a> </lightgallery> </div> |
As you can see we have the LightGallery
widget and inside it we are passing the settings
variable that we define inside the typescript
code and then we have the series
of images that will be displayed inside the gallery.
Adding the CSS Plugins
Now guys before writing the typescript
code we need to include all the plugins
of the lightgallery module which include the css
files as well. Now go to app.component.css
file and copy paste the below lines of code as shown below
app.component.css
1 2 3 4 5 6 7 8 9 10 11 12 |
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css'); @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css'); @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css'); @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-share.css'); @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-rotate.css'); @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-thumbnail.css'); body { margin: 0; } .gallery-item { margin: 5px; } |
Adding the TypeScript Code
Now we need to go to app.component.ts
file and add the below lines of typescript
code to show the lightgallery
for the images that we have defined inside the template
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { Component } from '@angular/core'; import lgZoom from 'lightgallery/plugins/zoom'; import lgVideo from 'lightgallery/plugins/video'; import lgThumbnail from 'lightgallery/plugins/thumbnail'; import lgShare from 'lightgallery/plugins/share'; import lgRotate from 'lightgallery/plugins/rotate'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'angular-demo'; settings = { counter: true, plugins: [lgZoom, lgVideo,lgThumbnail,lgShare,lgRotate] }; } |
As you can see we are requiring all the plugins
of the lightgallery module and then we are making the settings
object and then we are passing all the plugins inside the plugins array
which is required for the different functionalities that you see inside the image gallery as shown below