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:

1npm install ng-flyweight-gallery

🛠️ Usage

1. Import the Module

In your app.module.ts, import NgFlyweightGalleryModule:

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

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

1@NgModule({
2  declarations: [AppComponent],
3  imports: [NgFlyweightGalleryModule],  // Add here
4  bootstrap: [AppComponent],
5})
6export class AppModule {}

2. Use the Gallery Component

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

1<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:

1import { Component } from '@angular/core';
2import { MediaItem } from 'ng-flyweight-gallery';
3
4@Component({
5  selector: 'app-root',
6  templateUrl: './app.component.html',
7  styleUrls: ['./app.component.css'],
8})
9export class AppComponent {
10  mediaItems: MediaItem[] = [
11    {
12      type: 'image',
13      source: 'https://example.com/image1.jpg',
14      title: 'Sample Image 1',
15    },
16    {
17      type: 'video',
18      source: 'https://example.com/video1.mp4',
19      title: 'Sample Video 1',
20      autoplay: true,
21      loop: true,
22    },
23  ];
24}

---

🖼️ Example Media Item

Here’s how to define media items:

1mediaItems: MediaItem[] = [
2  {
3    type: 'image',
4    source: 'https://example.com/image.jpg',
5    title: 'Sample Image',
6  },
7  {
8    type: 'video',
9    source: 'https://example.com/video.mp4',
10    thumbnail: 'https://example.com/video-thumbnail.jpg',
11    title: 'Sample Video',
12    autoplay: true,
13    loop: true,
14  },
15];

---

🎨 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.