Product Gallery

Product 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 {
  ProductGallery
} from "vue-pretty-box";

html

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

Accepted props: animation, imagesUrl, isRounded/is-rounded, hasShadow/has-shadow, figcaption, space, isVertical, 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.
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.
isVertical/isVertical	Boolean	false	Use it if you want to put the images carousel vertically.