Single image

With this component, you can zoom in on an image to see it near and better view it.

Usage

javascript

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

html

<SingleImage
  imageUrl="..."
  animation="fade"
/>

Accepted props: animation, imageUrl, alt, isRounded/is-rounded, isCircled/is-circled, hasShadow/has-shadow, figcaption, and bgBackdropClose .

Note: Props with * are required.

Prop	Type	Default	Comment
imageUrl *	String	https://picsum.photos/1280/720?random	URL for the image to zoom in.
animation	String	fade	Animation to open modal with the image.
alt	String	Empty	Alt text for 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 image.
figcaption	String	Empty	Add figcaption text to image, it is visible only when you open the image.
bgBackdropClose/bg-backdrop-close	Boolean	false	You can close the image modal by clicking the background.