vue-lightbox-advanced
v2.0.1
Published
Vue Lightbox Advanced Photo Grid component for Vue.js
Downloads
2,853
Maintainers
Readme
Vue Lightbox Advanced
Vue Lightbox Advanced Photo Grid component for Vue.js
Vue Lightbox Advanced provides flexibility of displaying first x (1-5) images of your gallery in a grid view as you seen on Facebook timeline. Click on the thumbnail will return an event with the index or file url (src) as per passed props that can be used to show the image or can be used to redirect to that specific file url (src). It provides the shuffling images according to given options in docs.
Note: It requires parent height and width as the component will adapt to its resolutions
Version Support
Vue 3 - Current Branch ( TypeScript + Vite + vitest )
🎨 Features
Find out all available features on settings props and see how that works on examples.
🚚 Installation
yarn/npm
# npm
npm i vue-lightbox-advanced
# yarn
yarn add vue-lightbox-advanced
cdn
# latest
https://unpkg.com/vue-lightbox-advanced
🚀 Quick Start
<template>
<div style="height: 250px; width: 400px;">
<vue-lightbox-advanced :items="images" />
</div>
</template>
<script>
import VueLightboxAdvanced from 'vue-lightbox-advanced'
import 'vue-lightbox-advanced/dist/vue-lightbox-advanced.css'
export default {
name: 'MyComponent',
components: { VueLightboxAdvanced },
data() {
return {
images: [
'https://cdn.pixabay.com/photo/2015/09/17/14/24/woman-944261_960_720.jpg',
'https://cdn.pixabay.com/photo/2015/10/30/20/13/boat-1014711_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/10/17/16/10/fantasy-2861107_960_720.jpg',
'https://cdn.pixabay.com/photo/2016/05/11/16/32/bridge-1385938_960_720.jpg',
'https://cdn.pixabay.com/photo/2018/09/19/23/03/sunset-3689760_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/09/15/09/10/church-5573087_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/05/04/12/43/zebra-2283914_960_720.jpg',
'https://cdn.pixabay.com/photo/2018/01/25/14/12/nature-3106213_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/12/10/15/16/white-horse-3010129_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/06/07/10/47/elephant-2380009_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/01/18/17/14/girl-1990347_960_720.jpg'
]
}
}
}
</script>
🔖 License
This software is licensed under the MIT.