1.3.1 • Published 4 years ago
vue-easy-gallery v1.3.1
vue-easy-gallery
A easy to use, responsive gallery vue component.
Demo
Installation
NPM
$ npm i vue-easy-gallery
Usage
Example
<template>
<Gallery
:images="images"
:per-row="3"
:options="{border: 'solid thin white'}"
/>
</template>
<script>
import Gallery from "vue-easy-gallery";
export default {
components: { Gallery },
data(){
return {
images: [
{
"src" : "https://myimage.url/img1.jpg",
"thumbnail" : "https://myimage.url/img1thumb.jpg",
"height" : 4013,
"width" : 3581
},
{
"src" : "https://myimage.url/img2.jpg",
"thumbnail" : "https://myimage.url/img2thumb.jpg",
"height" : 4264,
"width" : 2843
}
]
}
}
}
</script>
Attributes
per-row
The amount of images per row
<Gallery :images="images" :per-row="3"></Gallery>
images
the images to display
images = [
{
//[required] the source of the image
src: "https://myimage.url/img1.jpg",
//[required] the hight of the image, required
height: 4013,
//[required] the width of the image, required
width: 3581,
//[recommended] a less detailed version of the image, will be displayed blurred during loading
//recommended size is less then 1kb, optional but recommended
thumbnail: "https://myimage.url/img1thumb.jpg",
//[optional] Text, that will be displayed at the bottom of the image, optional
text: "Lorem ipsum dolor sit amet",
},
];
options
options = {
//the border around each image, can be used as padding
border: "solid .5rem transparent", //default: none
//smoother transitions on window resize
smoothResize: false,
//When the image is clicked, the text is toggled visible/invisible
toggleTextOnClick: false,
//Organizes images not in rows, but columsn
vertical: false,
};