Image Gallery Masonry

Image gallery component you can zoom in on an image to see it near and better view it, also you have a slider in the modal to see other ones.

Usage

javascript

// Import JS
import {
  ImageGalleryMasonry
} from "vue-pretty-box";

html

<ImageGalleryMasonry
  imageUrl="[{ img: '...', alt: '...', figcaption: '...' }]"
  animation="fade"
/>

Props

Accepted props: animation, imagesUrl, isRounded/is-rounded, isCircled/is-circled, hasShadow/has-shadow, figcaption, columns, mdColumns, xsColumns, space and bgBackdropClose .

Note: Props with * are required.

Prop	Type	Default	Comment
imagesUrl *	Array	8 random Picsum photos	URLs for the images to zoom in. Structure below: `[{ img: "...", alt: "...", figcaption: "..." }]`
animation	String	fade	Animation to open modal with the image.
isRounded/is-rounded	Boolean	false	Add little rounded corners.
isCircled/is-circled	Boolean	false	Make a circle with the image, it works better with a square image.
hasShadow/has-shadow	Boolean	false	Add a little shadow to the images.
squared	Boolean	false	All images are squared.
columns	Number	4	Quantity of columns on desktop.
mdColumns	Number	3	Quantity of columns on tablet.
xsColumns	Number	2	Quantity of columns on mobile.
space	String	20px	Gap space for each column, you can use px, rem, em, etc.
bgBackdropClose/bg-backdrop-close	Boolean	false	You can close the image modal by clicking the background.

Image Gallery Masonry ​

Usage ​

Props ​

Image Gallery Masonry

Usage

Props