MazGallery

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

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

+1

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

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

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

Set height by CSS

+1

<MazGallery
  :images="images"
  class="maz-h-48 mob-l:maz-h-60 tab-s:maz-h-80"
  no-height
/>

Types

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

Component informations

Props

Prop name	Description	Type	Values	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[]	-	() => []
imagesShownCount	Images count shown (max: 5)	number	-	5
noRemaining	Remove transparent layer with the remain count (ex: +2)	boolean	-	false
height	Height of gallery	number|string	-	150
noHeight	Remove default height - useful to set height with css	boolean	-	false
width	Width of gallery	number|string	-	'100%'
noWidth	Remove default width	boolean	-	false
noRadius	Disable the border radius of the gallery	boolean	-	false
noZoom	Disable full size display when clicking on image	boolean	-	false
hasEmptyLayer	Layer with photography icon when no images is provided	boolean	-	true
lazy	Lazy load image - if false, images are directly loaded	boolean	-	true
blur	Disable blur effect on image hover	boolean	-	true
scale	Disable scale animation effect on image hover	boolean	-	true
separatorColor	Choose color of borders between images - Should be a CSS color or CSS variable - Ex: #000 or var(--maz-color-bg-light)	string	-	'transparent'