Skip to content

Commit 932580d

Browse files
pexea12pexea12
committed
feat(lightbox): add video display
1 parent e88d911 commit 932580d

17 files changed

+692
-928
lines changed

‎.eslintrc

-173
This file was deleted.

‎.eslintrc.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"env": {
3+
"browser": true
4+
},
5+
6+
"extends": [
7+
"plugin:vue/recommended"
8+
],
9+
10+
"rules": {
11+
"vue/no-v-html": ["off"]
12+
}
13+
}

‎README.md

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# vue-image-lightbox
2-
A simple image lightbox component for Vuejs
3-
[NPM Package](https://www.npmjs.com/package/vue-image-lightbox)
2+
A simple image/video lightbox component for Vuejs
3+
[NPM Package](https://www.npmjs.com/package/vue-image-lightbox)
44

55
I use CSS style from [react-images](https://github.com/jossmac/react-images)
66

@@ -61,19 +61,19 @@ require('vue-image-lightbox/dist/vue-image-lightbox.min.css')
6161
```
6262
How to use:
6363
```html
64-
<LightBox :images="images"></LightBox>
64+
<LightBox :media="media"></LightBox>
6565
```
6666

67-
`images` has the structure:
67+
`media` has the structure:
6868
```javascript
6969
[
70-
{
70+
{ // For image
7171
thumb: 'http://example.com/thumb.jpg',
7272
src: 'http://example.com/image.jpg',
7373
caption: 'caption to display. receive <html> <b>tag</b>', // Optional
7474
srcset: '...' // Optional for displaying responsive images
7575
},
76-
{
76+
{ // For video
7777
thumb: 'https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg',
7878
sources: [
7979
{
@@ -83,6 +83,8 @@ How to use:
8383
],
8484
type: "video",
8585
caption: '<h4>Monsters Inc.</h4>',
86+
width: 800, // required
87+
height: 600, // required
8688
}
8789
]
8890
```
@@ -98,13 +100,13 @@ How to use:
98100
<th>default</th>
99101
<th>description</th>
100102
</tr>
101-
</thead>
103+
</thead>
102104
<tbody>
103105
<tr>
104-
<td>images</td>
106+
<td>media</td>
105107
<td>Array</td>
106108
<td>required</td>
107-
<td>Image array to display</td>
109+
<td>Media array to display</td>
108110
</tr>
109111
<tr>
110112
<td>showLightBox</td>
@@ -213,7 +215,7 @@ How to use:
213215
<th>arguments</th>
214216
<th>description</th>
215217
</tr>
216-
</thead>
218+
</thead>
217219
<tbody>
218220
<tr>
219221
<td>nextImage</td>
@@ -287,9 +289,6 @@ The caption of the current image.
287289
#### videoIcon
288290
The Icon used for videos
289291

290-
#### video
291-
The video player
292-
293292
### Events
294293

295294
- `onOpened(value)`: `true` to emit when the lightbox is opened and `false` when it is closed.
@@ -304,7 +303,7 @@ Most of the CSS belongs to [react-images](https://github.com/jossmac/react-image
304303

305304
### Contributors:
306305
- [@imcvampire](https://github.com/imcvampire)
307-
- [@krystalcampioni](https://github.com/krystalcampioni)
306+
- [@krystalcampioni](https://github.com/krystalcampioni)
308307
- [@jstr14](https://github.com/jstr14)
309308
- [@PedroBatista333](https://github.com/PedroBatista333)
310309
- [@vtalbot](https://github.com/vtalbot)

‎package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "vue-image-lightbox",
33
"description": "A Vue.js package to display an image gallery lightbox",
4-
"version": "6.4.0",
5-
"author": "Nguyen Thien Dzung <[email protected]>",
4+
"version": "7.0.0",
5+
"author": "Nguyen P. Thien Dzung <[email protected]>",
66
"license": "MIT",
77
"main": "dist/vue-image-lightbox.min.js",
88
"files": [
@@ -12,7 +12,7 @@
1212
"scripts": {
1313
"dev": "webpack-dev-server --inline --hot --open --config build/webpack.dev.conf.js --mode development",
1414
"build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js --mode production",
15-
"lint": "eslint --ext .js,.vue app/"
15+
"lint": "eslint --ext .js,.vue src/"
1616
},
1717
"repository": {
1818
"type": "git",
@@ -43,7 +43,8 @@
4343
"@babel/preset-env": "^7.5.5",
4444
"copy-webpack-plugin": "5.1.1",
4545
"css-loader": "3.2.0",
46-
"eslint": "6.3.0",
46+
"eslint": "^6.8.0",
47+
"eslint-plugin-vue": "^6.2.1",
4748
"file-loader": "^4.2.0",
4849
"html-webpack-plugin": "^3.2.0",
4950
"mini-css-extract-plugin": "^0.8.0",

‎src/App.vue

+16-24
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,30 @@
11
<template>
2-
<div id="app" style="background-color: yellow" class="row">
2+
<div
3+
id="app"
4+
style="background-color: yellow"
5+
class="row"
6+
>
37
<div>
48
<ul>
5-
<li
6-
v-for="(image, index) in images"
9+
<li
10+
v-for="(image, index) in media"
11+
:key="index"
712
style="display: inline-block"
813
>
9-
<img
14+
<img
1015
v-lazy="image.src || image.thumb"
11-
style="height: 100px"
16+
style="height: 100px"
1217
@click="openGallery(index)"
1318
>
1419
</li>
1520
</ul>
16-
<LightBox
17-
:images="images"
21+
22+
<LightBox
1823
ref="lightbox"
24+
:media="media"
1925
:show-caption="true"
2026
:show-light-box="false"
21-
>
22-
<template slot="video" slot-scope="{sources}">
23-
<video
24-
controls
25-
width="800"
26-
height="500"
27-
>
28-
<source
29-
v-for="source in sources"
30-
:src="source.src"
31-
:type="source.type"
32-
/>
33-
</video>
34-
</template>
35-
</LightBox>
27+
/>
3628
</div>
3729
</div>
3830
</template>
@@ -41,7 +33,7 @@
4133
import LightBox from 'components/LightBox'
4234
4335
import siteLoading from './siteloading.gif'
44-
import images from './dummy'
36+
import media from './dummy'
4537
4638
export default {
4739
components: {
@@ -50,7 +42,7 @@ export default {
5042
5143
data () {
5244
return {
53-
images,
45+
media,
5446
siteLoading,
5547
}
5648
},

‎src/components/CloseIcon.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<span>
3+
<svg
4+
fill="white"
5+
x="0px"
6+
y="0px"
7+
width="100%"
8+
height="100%"
9+
viewBox="0 0 512 512"
10+
style="enable-background:new 0 0 512 512;"
11+
>
12+
<path
13+
d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"
14+
/>
15+
</svg>
16+
</span>
17+
</template>

0 commit comments

Comments
 (0)