Quick Start

import { Component } from '@angular/core';
import { GalleryComponent, GalleryImage } from '@angularforge/gallery';

@Component({
  selector: 'app-root',
  imports: [GalleryComponent],
  template: '<ngx-gallery [galleryImages]="images" [options]="options" lang="en" />',
})
export class AppComponent {
  images: GalleryImage[] = [
    { src: 'https://example.com/photo1.jpg', alt: 'Mountain view', width: 1920, height: 1080 },
    { src: 'https://example.com/photo2.jpg', alt: 'City skyline', width: 1200, height: 800 },
    { src: 'https://example.com/photo3.jpg', alt: 'Ocean sunset', width: 1600, height: 900 },
  ];

  options = {
    layout: { distribution: '1/2' as const, orientation: 'vertical' as const },
    showAllPicturesBtn: true,
    showControls: true,
    showShareBtn: true,
  };
}