https://github.com/codeeshop-oc/vue-lightbox-advanced
Vue Lightbox Advanced Photo Grid component for Vue.js
https://github.com/codeeshop-oc/vue-lightbox-advanced
component npm-package vue vue-component vue-components vue-lightbox vue-lightbox-advanced vue2 vue3 vuejs vuejs2 vuejs3
Last synced: 10 months ago
JSON representation
Vue Lightbox Advanced Photo Grid component for Vue.js
- Host: GitHub
- URL: https://github.com/codeeshop-oc/vue-lightbox-advanced
- Owner: codeeshop-oc
- License: mit
- Created: 2021-07-17T11:12:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-13T10:44:31.000Z (over 2 years ago)
- Last Synced: 2025-03-26T15:54:38.352Z (11 months ago)
- Topics: component, npm-package, vue, vue-component, vue-components, vue-lightbox, vue-lightbox-advanced, vue2, vue3, vuejs, vuejs2, vuejs3
- Language: Vue
- Homepage: https://codeeshop-oc.github.io/vue-lightbox-advanced/
- Size: 1.07 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Lightbox Advanced
> Vue Lightbox Advanced Photo Grid component for Vue.js
[](https://www.npmjs.com/package/vue-lightbox-advanced) [](https://npm-stat.com/charts.html?package=vue-lightbox-advanced)
[](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/main/LICENSE)
[](https://github.com/codeeshop-oc/vue-lightbox-advanced/issues?&q=is%3Aissue+is%3Aopen)
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 )
[Vue 2](https://github.com/codeeshop-oc/vue-lightbox-advanced/tree/vue2)
## 🎨 Features
Find out all available features on [settings props](/docs/api/props.md) and see how that works on [examples](/docs/examples.md).
## 🚚 Installation
### yarn/npm
```bash
# npm
npm i vue-lightbox-advanced
# yarn
yarn add vue-lightbox-advanced
```
### cdn
```bash
# latest
https://unpkg.com/vue-lightbox-advanced
```
## 🚀 Quick Start
```html
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'
]
}
}
}
```
## 🔖 License
This software is licensed under the [MIT](https://github.com/codeeshop-oc/vue-lightbox-advanced/blob/main/LICENSE).
### Reference
[Morioh-Lab/v-lightbox](https://github.com/Morioh-Lab/v-lightbox)