ng-flyweight-gallery ✨

ng-flyweight-gallery is a lightweight and customizable Angular component library for creating responsive media galleries. It supports images and videos, with features like autoplay, loop for videos and a responsive layout.

📦 Installation

To install the package, run the following command in your Angular project:

npm install ng-flyweight-gallery

🛠️ Usage

1. Import the Module

In your app.module.ts, import NgFlyweightGalleryModule:

import { NgFlyweightGalleryModule } from 'ng-flyweight-gallery';

Then, add it to the imports array of your @NgModule:

@NgModule({
  declarations: [AppComponent],
  imports: [NgFlyweightGalleryModule],  // Add here
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Use the Gallery Component

In your component’s HTML file (e.g., app.component.html), use the gallery component:

<ng-flyweight-gallery [mediaItems]="mediaItems"></ng-flyweight-gallery>

3. Define the `mediaItems` Array

In your component’s TypeScript file (e.g., app.component.ts), define the mediaItems array:

import { Component } from '@angular/core';
import { MediaItem } from 'ng-flyweight-gallery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  mediaItems: MediaItem[] = [
    {
      type: 'image',
      source: 'https://example.com/image1.jpg',
      title: 'Sample Image 1',
    },
    {
      type: 'video',
      source: 'https://example.com/video1.mp4',
      title: 'Sample Video 1',
      autoplay: true,
      loop: true,
    },
  ];
}

🖼️ Example Media Item

Here’s how to define media items:

mediaItems: MediaItem[] = [
  {
    type: 'image',
    source: 'https://example.com/image.jpg',
    title: 'Sample Image',
  },
  {
    type: 'video',
    source: 'https://example.com/video.mp4',
    thumbnail: 'https://example.com/video-thumbnail.jpg',
    title: 'Sample Video',
    autoplay: true,
    loop: true,
  },
];

🎨 Customization

You can easily modify the component’s styles directly or override them globally in your project. The gallery layout and lightbox are fully customizable.

📝 License

This library is released under the MIT License.

Package detail