Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/littlewin-wang/vue-images
:lollipop: A simple lightbox component for displaying an array of images
https://github.com/littlewin-wang/vue-images
demo lightbox-component vue-images
Last synced: 3 months ago
JSON representation
:lollipop: A simple lightbox component for displaying an array of images
- Host: GitHub
- URL: https://github.com/littlewin-wang/vue-images
- Owner: littlewin-wang
- License: mit
- Created: 2017-01-03T08:45:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-25T02:23:01.000Z (over 6 years ago)
- Last Synced: 2024-03-18T05:47:03.838Z (3 months ago)
- Topics: demo, lightbox-component, vue-images
- Language: JavaScript
- Homepage: https://littlewin-wang.github.io/vue-images/example
- Size: 444 KB
- Stars: 214
- Watchers: 5
- Forks: 48
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-github-vue - vue-images - 显示一组图片的lightbox组件 (UI组件)
- awesome-vue - vue-images - wang/vue-images?style=social) - 显示一组图片的lightbox组件 (UI组件)
- awesome-github-vue - vue-images - 显示一组图片的lightbox组件 (UI组件)
- awesome-github-vue - vue-images - 显示一组图片的lightbox组件 (UI组件)
- awesome - vue-images - 显示一组图片的lightbox组件 (UI组件)
README
# vue-images
[](https://badge.fury.io/js/vue-images)
[](https://github.com/littlewin-wang/vue-images/blob/master/LICENSE)
> A simple lightbox component for displaying an array of images
## Feature
- Mobile friendly
- Thumbnail navigation
- Responsive design
## Demo & Examples
Live demo: [https://littlewin-wang.github.io/vue-images/example](https://littlewin-wang.github.io/vue-images/example)
## Start guide
- Import using module:
``` bash
// Install using npm
npm install vue-images --save
// In ES6 module
import vueImages from 'vue-images'
// Use module as component
new Vue({
el: '#app',
data () {
return {
images: [...],
...
}
},
components: {
vueImages: vueImages
}
})
```
- Import using script tag:
``` html
```
``` js
new Vue({
el: '#app',
data () {
return {
images: [...],
...
}
},
components: {
vueImages: vueImages.default
}
})
```
## Options
Property | Type | Default | Description
-------- | ---- | ------- | -----------
images | array | undefined | Required. An array of objects containing valid src and srcset values of img element
modalclose | bool | true | Allow users to exit the lightbox by clicking the backdrop
keyinput | bool | true | Supports keyboard input - esc, ←, and →
mousescroll | bool | true | Supports mouse scroll
showclosebutton | bool | true | Optionally display a close X button in top right corner
showcaption | bool | true | Optionally display a caption under the image
imagecountseparator | string | ' of ' | Custom separator for the image count
showimagecount | bool | true | Optionally display image index, e.g., "3 of 20"
showthumbnails | bool | false | Optionally display thumbnails beneath the Lightbox
## Change log
- 1.0.0: Init file structure -> npm publish
- 1.0.1: Fix some bug when display in example page
- 1.0.2: Add basic config options
- 1.0.3: Add full screen and autoplay handle
- 1.0.4: Fix #2 & #3
- 1.0.5: Package css,js to single js file
- 1.0.6: fix #6
- 1.0.7: Fix #8
- 1.0.8: Fix #9 (add html parser in the caption & add flex-wrap to the gallery)
- 1.0.9: Add 'main' in package.json
- 1.0.10: Fix #17 & #14
- 1.1.0: Add transition & debounce strategy