MazGallery

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

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

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	Possible values
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	[]	-
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	string | number | false	No	"100%"	-
width	Width of gallery - set to false to remove default width	string | number | false	No	"100%"	-
radius	Disable the border radius of the gallery	boolean	No	true	-
zoom	Disable full size display when clicking on image	boolean	No	true	-
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	string	No	"transparent"	-
background-color	Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: #000	string	No	-	-