vue-collage

Responsive collages with animated images for Vue.js. After given images are preloaded, component generates collages with different templates. Every slide can contain up to 5 pictures. Using transition animation, the component creates a different slide effects for every image in a collage (slide from the left/right/top/bottom). Collages are made in a way that vertical and horizontal images fit to container as best as possible. Collages take up 100% of the container height.

Credits:

This component is just a stripped-down version of vue-collage-slideshow from edicasoft, removing the slideshow/carousel components and randomization of the number of images shown (will default to collageSizeMax or images.length, whichever is greater.

Demo:

Check out the demo on jsFiddle

Installation:

Just use npm install --save vue-collage

Set up:

import Collage from 'vue-collage';

export default {
  ...
  components: {
    Collage
  }
  ...
};

Usage:

<collage :images="images" height="600px">
</collage>

Props:

Props	Type	Default	Description
images	Array	[]	Array of Objects with a structure: {image: "https://example.com/images/picture.jpg"}
height	String	'600px'	Define the height of the slideshow container. Could be 100% etc
collageSizeMin	Number	2	Define the minimum collage size (number of images that can be in one collage)
collageSizeMax	Number	5	Define the maximum number of images that can be in one collage
showNoImagesMsg	Boolean	true	Whether display "no images" text or not
noImagesMsg	String	'No Images'	Define the text of the message that shows up if there are no images
showLoadingMsg	Boolean	true	Whether display the loader for images preloading or not
loadingMsg	String	'Loading...'	Define the text of the preloader message

Slots:

"loader" - slot to place loading message when images are loading

<template slot="loader">
    <div id="loader">Loading...</div>
</template>

"empty" - content to display when no items are present in the images array

<template slot="empty">
    <div id="no-images">No images</div>
</template>

Contribution

Feel free to contribute on GitHub