Appearance
Image Gallery
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 {
ImageGallery
} from "vue-pretty-box";
html
<ImageGallery
imagesUrl="[{ img: '...', alt: '...', figcaption: '...' }]"
animation="fade"
/>
Props
Accepted props: animation, imagesUrl, isRounded/is-rounded, isCircled/is-circled, hasShadow/has-shadow, squared, 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. |