Product Gallery

A premium, responsive product gallery component featuring thumbnail navigation, hover-to-zoom capabilities, and video support.

Pro

Product Gallery — part of Ply Pro

Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Thumbnails on Left

HTML

<ply-product-gallery 
  [items]="items" 
  thumbnailsPosition="left" 
  [zoomOnClick]="true" 
  [showArrows]="true"
  aspectRatio="4/3">
</ply-product-gallery>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add product-gallery
// Paths are relative to aliases.components (default: src/app/components)
import { GalleryItem, ProductGalleryComponent } from './product-gallery/product-gallery.component';

@Component({
  selector: 'app-product-gallery-example',
  imports: [
    ProductGalleryComponent
  ],
  template: `...`
})
export class ProductGalleryExampleComponent {}

Install

bash

npx ply-ui-cli add product-gallery

Thumbnails on Bottom

HTML

<ply-product-gallery 
  [items]="items" 
  thumbnailsPosition="bottom" 
  [zoomOnClick]="true" 
  [showArrows]="true">
</ply-product-gallery>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add product-gallery
// Paths are relative to aliases.components (default: src/app/components)
import { GalleryItem, ProductGalleryComponent } from './product-gallery/product-gallery.component';

@Component({
  selector: 'app-product-gallery-example',
  imports: [
    ProductGalleryComponent
  ],
  template: `...`
})
export class ProductGalleryExampleComponent {}

Install

bash

npx ply-ui-cli add product-gallery

Thumbnails on Right

HTML

<ply-product-gallery 
  [items]="items" 
  thumbnailsPosition="right" 
  [zoomOnClick]="true" 
  [showArrows]="true">
</ply-product-gallery>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add product-gallery
// Paths are relative to aliases.components (default: src/app/components)
import { GalleryItem, ProductGalleryComponent } from './product-gallery/product-gallery.component';

@Component({
  selector: 'app-product-gallery-example',
  imports: [
    ProductGalleryComponent
  ],
  template: `...`
})
export class ProductGalleryExampleComponent {}

Install

bash

npx ply-ui-cli add product-gallery

Thumbnails on Top

HTML

<ply-product-gallery 
  [items]="items" 
  thumbnailsPosition="top" 
  [zoomOnClick]="true" 
  [showArrows]="true">
</ply-product-gallery>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add product-gallery
// Paths are relative to aliases.components (default: src/app/components)
import { GalleryItem, ProductGalleryComponent } from './product-gallery/product-gallery.component';

@Component({
  selector: 'app-product-gallery-example',
  imports: [
    ProductGalleryComponent
  ],
  template: `...`
})
export class ProductGalleryExampleComponent {}

Install

bash

npx ply-ui-cli add product-gallery

How to Use

The Product Gallery component provides a robust layout for showcasing product imagery. Drop in a <ply-product-gallery> element and configure your aspect ratio padding, thumbnail alignment, and zoom interactions natively.

HTML

<ply-product-gallery 
  [items]="galleryItems" 
  thumbnailsPosition="left"
  aspectRatio="16/9"
  [zoomOnClick]="true"
  [showArrows]="true">
</ply-product-gallery>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add product-gallery
// Paths are relative to aliases.components (default: src/app/components)
import { GalleryItem, ProductGalleryComponent } from './product-gallery/product-gallery.component';

@Component({
  selector: 'app-product-gallery-example',
  imports: [
    ProductGalleryComponent
  ],
  template: `...`
})
export class ProductGalleryExampleComponent {}

Install

bash

npx ply-ui-cli add product-gallery

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add product-gallery

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add product-gallery
// Paths are relative to aliases.components (default: src/app/components)
import { GalleryItem, ProductGalleryComponent } from './product-gallery/product-gallery.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ProductGalleryComponent
  ],
  template: `...`
})
export class YourComponent {}

API for product-gallery — generated from JSDoc in the library source.

API reference for product-gallery
API	Member	Type	Default	Description
`GalleryItem`	`id`	`string \| number`	—	Optional unique identifier for the item.
`GalleryItem`	`src`	`string`	—	The source URL of the main image or video.
`GalleryItem`	`thumbSrc`	`string`	—	The source URL of the thumbnail image. Defaults to `src` if not provided.
`GalleryItem`	`alt`	`string`	—	Alternative text for accessibility.
`GalleryItem`	`type`	`'image' \| 'video'`	—	Media type, either 'image' or 'video'. Defaults to 'image'.
`ply-product-gallery`	`class`	`string`	`''`	Additional CSS classes to merge into the host element.
`ply-product-gallery`	`galleryLabel`	`unknown`	`'Product gallery'`	Accessible label for the product gallery carousel region.
`ply-product-gallery`	`items`	`GalleryItem[]`	`[]`	The array of media items to display in the gallery.
`ply-product-gallery`	`thumbnailsPosition`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	Position of the thumbnails strip relative to the main viewer. Defaults to 'left'.
`ply-product-gallery`	`showArrows`	`boolean`	`true`	Whether to show previous/next navigation arrows on the main viewer.
`ply-product-gallery`	`objectFit`	`'cover' \| 'contain'`	`'cover'`	CSS object-fit rule for the main image ('cover' or 'contain').
`ply-product-gallery`	`zoomOnClick`	`boolean`	`true`	Enables an interactive magnifying zoom effect when clicking the main image.
`ply-product-gallery`	`aspectRatio`	`string`	`'16/9'`	Aspect ratio constraint for the main viewer (e.g., '16/9' or '1/1').
`ply-product-gallery`	`mainViewWidth`	`string`	`'100%'`	Width of the main view container. Defaults to '100%'.
`ply-product-gallery`	`mainViewHeight`	`string`	`'auto'`	Height of the main view container. Defaults to 'auto'.
`ply-product-gallery`	`(indexChange)`	`number`	—	Emitted whenever the active selected item changes.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).