Component

Image Viewer

Image viewer directive with gallery support, keyboard navigation, zoom and touch gestures. Accepts a single image or an array.

import { NeuImageViewerDirective } from '@neural-ui/core/image-viewer';
import type { NeuImageViewerItem } from '@neural-ui/core/image-viewer';

Gallery (click to open)

Single image

Example image that opens in the image viewer

Open programmatically

import { NeuImageViewerDirective } from '@neural-ui/core/image-viewer';
import { NeuImageViewerItem } from '@neural-ui/core/image-viewer';

@Component({
  imports: [NeuImageViewerDirective],
  template: `
    <!-- Galería con navegación / Gallery with navigation -->
    @for (img of gallery; track img.src; let i = $index) {
      <img
        [src]="img.src"
        [alt]="img.alt"
        [neuImageViewer]="gallery"
        [neuIvIndex]="i"
        style="cursor: zoom-in"
      />
    }

    <!-- Imagen individual (thumbnail → HD) / Single image (thumbnail → HD) -->
    <img
      src="foto-thumb.jpg"
      alt="Descripción"
      [neuImageViewer]="'https://cdn.example.com/foto-hd.jpg'"
      style="cursor: zoom-in"
    />

    <!-- Abrir programáticamente / Open programmatically -->
    <button (click)="viewer.open()">Ver galería</button>
    <span
      [neuImageViewer]="gallery"
      [neuIvIndex]="0"
      #viewer="neuImageViewer"
      style="display: none"
    ></span>
  `
})
export class MyComponent {
  gallery: NeuImageViewerItem[] = [
    { src: 'https://picsum.photos/seed/a/1200/800', alt: 'Imagen 1', caption: 'Paisaje de montaña' },
    { src: 'https://picsum.photos/seed/b/1200/800', alt: 'Imagen 2', caption: 'Atardecer en el mar' },
    { src: 'https://picsum.photos/seed/c/1200/800', alt: 'Imagen 3', caption: 'Bosque tropical' },
  ];
}