MazGallery

MazGallery is a standalone component used to display images in a container and has many options and actions

Basic usage

+1

<script lang="ts" setup>
import { MazGallery, type MazGalleryImage } from 'maz-ui/components'

const images: MazGalleryImage[] = [
  'https://placedog.net/640/400',
  { src: 'https://placedog.net/640/600', thumbnail: 'https://placedog.net/100/100', alt: 'image description' },
  { src: 'https://placedog.net/640/700', alt: 'image description' },
  'https://placedog.net/640/800',
  'https://placedog.net/640/1000',
  'https://placedog.net/800/800'
]
</script>

<template>
  <MazGallery
    :images
    :height="320"
  />
</template>

Set height by CSS

+1

<MazGallery :images="images" class="h-48 md:h-60 lg:h-80" :height="false" />

Types

type MazGalleryImage
  = | {
    thumbnail?: string
    src: string
    alt?: string
  }
  | string

Props

Name	Description	Type	Required	Default
images	Array of string or object: ['https://via.placeholder.com/500', 'https://via.placeholder.com/600'] or [{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]	MazGalleryImage[]	No	undefined
displayed-count	Images count shown (max: 5)	number	No	5
remaining	Remove transparent layer with the remain count (ex: +2)	boolean	No	true
height	Height of gallery - set to false to remove default height	number | string | false	No	150
width	Width of gallery - set to false to remove default width	number | string | false	No	100%
radius	Disable the border radius of the gallery	boolean	No	false
zoom	Disable full size display when clicking on image	boolean	No	false
has-empty-layer	Layer with photography icon when no images is provided	boolean	No	true
lazy	Lazy load image - if false, images are directly loaded	boolean	No	true
blur	Disable blur effect on image hover	boolean	No	true
scale	Disable scale animation effect on image hover	boolean	No	true
separator-color	Choose color of borders between images - Should be a CSS color or CSS variable - Ex: #000 or hsl(var(--maz-background-300))	string	No	transparent
background-color	Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: #000 or hsl(var(--maz-background-300))	string	No	hsl(var(--maz-background-300))