Wts Image Gallery

Wts Image Gallery is a lightweight, Angular 17+ compatible directive for displaying images in a popup modal, similar to FancyBox but without relying on jQuery. This package provides a clean, modern way to handle image zoom and popup functionality, fully integrated with Angular's reactive features.

Install

npm install --save wts-image-gallery

Next import calendar component

import { Component, ViewChild, afterNextRender } from '@angular/core';

import { WtsImageDirective } from 'wts-image-gallery';

....

@Component({
  selector: '<COMPONENT-SELECTOR>',
    templateUrl: '<COMPONENT>.html',
    styleUrls: ['<COMPONENT>.scss'],
    standalone: true,
    imports: [WtsImageDirective],
    providers: [DatePipe]
})
export class CalenderComponent {

}

HTML

    <div class="wts-image-gallery">
    <img src="./image1.jpg" alt="" wts-image title="Quos nulla adipisci amet aspernatur porro.">
    <img src="./image2.jpg" alt="" wts-image
      title="Esse vero rerum ut maiores earum velit provident dolores inventore incidunt">
  </div>

Features

No jQuery Dependency: Built entirely with Angular, no need to include jQuery or any external dependencies.

Lightweight: Focuses on delivering a simple image popup experience without bloat.

Customizable Styles: Easily customize the modal’s look and feel to match your application's theme.

Responsive Design: Ensures the image popup works seamlessly across devices, from mobile to desktop.

Animation Support: Smooth opening and closing animations for a polished user experience.

Keyboard and Mouse Navigation: Allows users to navigate between images using arrow keys or mouse clicks.

Demo

Stackblitz

Keywords

image modal, Angular lightbox, Angular image lightbox, Angular image gallerypopup, Angular gallerypopup, gallerypopup, Angular Standalone Calender, Angular Standalone Component, @typeScript