vue-easy-gallery
A easy to use, responsive gallery vue component.
Demo
Installation
NPM
$ npm i vue-easy-gallery
Usage
Example
<script> ; components: Gallery { 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
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;