Create an image lightbox with animated transition effects in Angular

3 min readFeb 7, 2021

A lightbox is usually used to show images of a gallery in a modal or at full screen in order to see the images in a larger size. In this article I am going to show how to create a special lightbox in an Angular project, which has amazing image transition effects. The library used therefore is called ngx-acuw. This library allows using different predefined image transition effects. In the GIF below you can see how an image transition effect looks like in a lightbox.

In order to realize such image transition effects the ngx-acuw library uses the WEBGL library three.js. The transition effects are written in GLSL shader code. But I do not want to bother you explaining how the transition effects are made, because one of the reasons why the ngx-acuw library has been created is, that web developers don’t have to take care about writing GLSL (OpenGL Shading Language), which is in my opinion quite time-consuming. In case you are interested anyway you can get started by reading The Book of Shaders.

But as already mentioned the target of this article is to show how you can create the lightbox in your Angular library in a very easy way.

1. Install the library including the dependencies

npm install three @types/three @angular/cdk ngx-acuw

2. Import the @angular/cdk CSS

In order to show the modal for the lightbox correctly you need to import the ‘overlay-prebuilt.css’ from @angular/cdk. If you use Angular Material in your project, you can skip this step.

@import '~@angular/cdk/overlay-prebuilt.css';

3. Import module

Now you need to import the LigthboxModule into the root module.

@NgModule({ 
  declarations: [AppComponent, ...],
  imports: [LightboxModule],
  bootstrap: [AppComponent]
})
export class AppModule { 
}

4. Create a string array containing the links to the images in your component

For passing the images to the lightbox library component a string array with the URL to the images is needed. (credits to David Clode on Unsplash for the pictures)

import { Component } from '@angular/core';@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})export class AppComponent {
  imageUrls = [
    'https://source.unsplash.com/7BLRSG-AkJs',
    'https://source.unsplash.com/rcJbbK5_iIA',
    'https://source.unsplash.com/yQUwIlUeU4o',
    'https://source.unsplash.com/MlaQmWvzRTw',
    'https://source.unsplash.com/6dTpYUcr1yg',
    'https://source.unsplash.com/EyEdZ2aKRfA',
    'https://source.unsplash.com/qkJ4kHexI2o',
    'https://source.unsplash.com/XrO6WBflFRo'
  ];
}

5. Add the library-component lib-lightbox in the template

The final step is to create img-tags for all images in the string array and to add the ‘lib-lightbox’ component. To show all the images we simply use the structual directive *ngFor at the img-tag.

When clicking on one of the images I want that the lightbox is opened and the clicked image is shown in the lightbox. In order to open the lightbox and show the specific image, I call the ‘open’ method of the lightbox component and pass the index number of the selected image.

Finally, I just add the ‘lib-lightbox’ component and pass the string array of the image URLs as well as some other parameters to the component. A detailed description of the API for the lightbox component can be found at the ngx-acuw demo page. In this example we set the image transition type to “split”, which is the transition effect shown in the GIF of this article.

<div class="gallery">
  <img *ngFor="let imgUrl of imageUrls; let idx = index [src]="imgUrl" (click)="lightbox.open(idx)" loading="lazy"/>
</div><lib-lightbox #lightbox [imageUrls]="imageUrls" transitionType="split"></lib-lightbox>

A complete example on how to use the lightbox can be found in this stackblitz project. The demo and description of the library can be found at the GitHub page of ngx-acuw library.

Let me know what you think about this article or the library. I would be glad to get some feedback from other developers.