Media

Galleria

A gallery that shows one image large with thumbnails, dots, a caption and arrows. It can play as a slideshow and open full screen over the page.

Features10

API

Theming

Basic

Images with src and thumbnailSrc render without templates. numVisible sets how many thumbnails fit; the active one stays in view. Use the arrow keys on the thumbnails or swipe the image.

Dawn over the ridge

First light on the eastern slopes.

Showing Dawn over the ridge

Effects

effect sets how one image replaces another: slide (default), fade, zoom, blur, flip or none. The old and the new image move at the same time, so nothing flashes between them.

Slide

Fade

Zoom

Blur

Flip

None

Dawn over the ridge

First light on the eastern slopes.

9 lines

<tx-tabs [tabs]="effects" [(value)]="choice" /><tx-galleria  [value]="photos"  [numVisible]="5"  [responsiveOptions]="responsive"  [effect]="effect()"  showItemNavigators  circular/>

Thumbnails

thumbnailsPosition puts the thumbnails at the bottom, top, left or right; on the sides verticalThumbnailViewPortHeight sets their height.

Bottom

Top

Left

Right

Dawn over the ridge

First light on the eastern slopes.

8 lines

<tx-tabs [tabs]="positions" [(value)]="choice" /><tx-galleria  [value]="photos"  [numVisible]="4"  [responsiveOptions]="responsive"  [thumbnailsPosition]="position()"  verticalThumbnailViewPortHeight="360px"/>

Indicators

showIndicators adds a dot per image; indicatorsPosition places them, showIndicatorsOnItem puts them over the image and changeItemOnIndicatorHover switches on hover.

Bottom

Top

Left

Right

On the image

Dawn over the ridge

First light on the eastern slopes.

15 lines

<div class="controls">  <tx-tabs [tabs]="positions" [(value)]="choice" />  <span class="switch">    <tx-toggle-switch [(ngModel)]="onItem" inputId="indicators-on-item" />    <label for="indicators-on-item">On the image</label>  </span></div><tx-galleria  [value]="photos"  [showThumbnails]="false"  showIndicators  changeItemOnIndicatorHover  [showIndicatorsOnItem]="onItem()"  [indicatorsPosition]="position()"/>

Navigators

showItemNavigators adds arrows over the image; with showItemNavigatorsOnHover they appear only while the pointer or focus is on it. circular goes on from the last image to the first.

Dawn over the ridge

First light on the eastern slopes.

9 lines

<tx-galleria  [value]="photos"  [numVisible]="5"  [responsiveOptions]="responsive"  showItemNavigators  showItemNavigatorsOnHover  circular  [showThumbnailNavigators]="false"/>

Caption

The title and description of an image show as a caption over it. txGalleriaCaption replaces the caption with own content.

Dawn over the ridge

First light on the eastern slopes.

Dawn over the ridge1 / 8

11 lines

<div class="pair">  <tx-galleria [value]="photos" [showThumbnails]="false" showItemNavigators />  <tx-galleria [value]="photos" [showThumbnails]="false" showItemNavigators>    <ng-template txGalleriaCaption let-photo let-index="index">      <div class="caption">        <span>{{ photo.title }}</span>        <span class="count">{{ index + 1 }} / {{ photos.length }}</span>      </div>    </ng-template>  </tx-galleria></div>

Autoplay

autoPlay runs a slideshow every transitionInterval milliseconds. It pauses while the pointer or focus is on the gallery and, with shouldStopAutoplayByClick, stops when you pick another image.

Dawn over the ridge

First light on the eastern slopes.

Playing

16 lines

<tx-galleria  #gallery  [value]="photos"  [numVisible]="5"  [responsiveOptions]="responsive"  autoPlay  [transitionInterval]="3000"  circular/><div class="actions">  <button txButton size="small" severity="secondary" icon="play" (click)="play()">Play</button>  <button txButton size="small" severity="secondary" icon="pause" (click)="pause()">    Pause  </button>  <span class="status">{{ playing() ? 'Playing' : 'Paused' }}</span></div>

Full screen

With fullScreen the gallery opens over the page while [(visible)] is true. Pick a photo to open it at that image; Escape, the close button or a click on the backdrop closes it.

22 lines

<div class="grid">  @for (photo of photos; track photo.src; let index = $index) {    <button      type="button"      class="tile"      [attr.aria-label]="'Open ' + photo.title"      (click)="open(index)"    >      <img [src]="photo.src" alt="" />    </button>  }</div><tx-galleria  fullScreen  [value]="photos"  [(visible)]="visible"  [(activeIndex)]="active"  [numVisible]="7"  [responsiveOptions]="responsive"  showItemNavigators  circular/>

Templates

Any items work with txGalleriaItem and txGalleriaThumbnail; txGalleriaHeader and txGalleriaFooter add content around the gallery.

23 lines

<tx-galleria  [value]="trips"  [numVisible]="4"  [responsiveOptions]="responsive"  [(activeIndex)]="active"  showItemNavigators  [dt]="{ thumbnails: { itemOpacity: '1' } }">  <div txGalleriaHeader class="header">Trips this year</div>  <ng-template txGalleriaItem let-trip>    <figure class="trip">      <img [src]="trip.image" [alt]="trip.place" width="1200" height="800" />      <figcaption>        <strong>{{ trip.place }}</strong>        <span>{{ trip.region }} · {{ trip.days }} days</span>      </figcaption>    </figure>  </ng-template>  <ng-template txGalleriaThumbnail let-trip let-active="active">    <span class="chip" [class.active]="active">{{ trip.place }}</span>  </ng-template>  <div txGalleriaFooter class="footer">{{ trips[active()].days }} days on the road</div></tx-galleria>

Design tokens

dt changes the tokens of one gallery: no frame, a dark thumbnail strip and larger arrows.

Dawn over the ridge

First light on the eastern slopes.

12 lines

<tx-galleria  [value]="photos"  [numVisible]="5"  [responsiveOptions]="responsive"  showItemNavigators  [dt]="{    root: { borderWidth: '0', borderRadius: '14px' },    thumbnails: { background: 'var(--tx-surface-950)', itemOpacity: '0.35' },    thumbnailNavButton: { color: 'var(--tx-surface-300)' },    navButton: { size: '44px', iconSize: '20px' },  }"/>