Skip to content

Commit 18216e8

Browse files
author
clouless
committed
0.3.0 mp4 video support
1 parent 8194f00 commit 18216e8

13 files changed

+3072
-257
lines changed

‎README.md

+14-4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
* image title support
2323
* responsive
2424
* inline SVG buttons
25+
* MP4 video support (HTML 5 video)
2526
* minified: js 4.7 KB css 4.2 KB total 8.9 KB
2627
* gzipped: js 1.5 KB css 2.0 KB total 3.5 KB
2728

@@ -37,15 +38,24 @@
3738
```html
3839
<html>
3940
<body>
40-
<link href="https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.min.css" rel="stylesheet" />
41+
<link href="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.css" rel="stylesheet" />
4142

4243
<a href="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/images/DSC05104.JPG" target="_blank"><img
4344
src="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/thumbs/DSC05104.JPG"
4445
data-bilderrahmen="gallery-02"
4546
data-bilderrahmen-title="Image Four"
4647
/></a>
48+
49+
<!-- Video only supports MP4 and one video source! -->
50+
<a href="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4" target="_blank"><img
51+
src="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p-poster.jpg"
52+
style="width:200px;border:1px solid #ccc"
53+
data-bilderrahmen-video="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4"
54+
data-bilderrahmen="gallery-02"
55+
data-bilderrahmen-title="Video One"
56+
/></a>
4757

48-
<script src="https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.min.js"></script>
58+
<script src="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.js"></script>
4959
<script>
5060
new bilderrahmen({
5161
closeOnOutsideClick: true
@@ -81,14 +91,14 @@ Load css from `node_modules/bilderrahmen/dist/bilderrahmen.min.css`
8191
```html
8292
<html>
8393
<body>
84-
<link href="https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.min.css" rel="stylesheet" />
94+
<link href="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.css" rel="stylesheet" />
8595
<script src="https://cdn.rawgit.com/systemjs/systemjs/0.20.9/dist/system.js"></script>
8696
<script>
8797
SystemJS.config({
8898
map: {
8999
'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/plugin-babel.js',
90100
'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/systemjs-babel-browser.js',
91-
'bilderrahmen': 'https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.esm.js'
101+
'bilderrahmen': 'https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.esm.js'
92102
},
93103
transpiler: 'plugin-babel'
94104
});

‎dist/bilderrahmen.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
* @license MIT
3-
* Copyright (c) 2017 Bernhard Grünewaldt
3+
* Copyright (c) 2017 - 2018 Bernhard Grünewaldt
44
* https://github.com/codeclou/bilderrahmen
55
*/
66
.bilderrahmen-wrapper {
@@ -97,3 +97,4 @@
9797
height:auto;
9898
width:auto;
9999
}
100+

‎dist/bilderrahmen.esm.js

+75-28
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
* @license MIT
3-
* Copyright (c) 2017 Bernhard Grünewaldt
3+
* Copyright (c) 2017 - 2018 Bernhard Grünewaldt
44
* https://github.com/codeclou/bilderrahmen
55
*/
66
class Bilderrahmen {
@@ -118,35 +118,74 @@ class Bilderrahmen {
118118
// PREVIOUS BUTTON
119119
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, (indexInt - 1), 'left'));
120120

121+
const currentImageOrVideo = self._getImage(galleryId, index);
121122
// IMAGE
122-
const image = document.createElement('div');
123-
image.setAttribute('class', 'bilderrahmen--image');
124-
wrapper.appendChild(image);
125-
const imageInner = document.createElement('div');
126-
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
127-
image.appendChild(imageInner);
128-
const imageInnerWrap = document.createElement('div');
129-
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
130-
imageInner.appendChild(imageInnerWrap);
131-
const img = document.createElement('img');
132-
img.onload = function () {
133-
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
134-
};
135-
img.setAttribute('src', self._getImage(galleryId, index).src);
136-
img.setAttribute('class', 'bilderrahmen--image-img');
137-
img.setAttribute('id', self._generateId(galleryId, index));
138-
imageInnerWrap.appendChild(img);
123+
if (currentImageOrVideo.isVideo === false) {
124+
const image = document.createElement('div');
125+
image.setAttribute('class', 'bilderrahmen--image');
126+
wrapper.appendChild(image);
127+
const imageInner = document.createElement('div');
128+
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
129+
image.appendChild(imageInner);
130+
const imageInnerWrap = document.createElement('div');
131+
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
132+
imageInner.appendChild(imageInnerWrap);
133+
const img = document.createElement('img');
134+
img.onload = function () {
135+
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
136+
};
137+
img.setAttribute('src', self._getImage(galleryId, index).src);
138+
img.setAttribute('class', 'bilderrahmen--image-img');
139+
img.setAttribute('id', self._generateId(galleryId, index));
140+
imageInnerWrap.appendChild(img);
141+
//
142+
// CLOSE ON OUTSIDE CLICK
143+
//
144+
if (self.store.closeOnOutsideClick === true) {
145+
imageInnerWrap.onclick = () => self.closeIfOpen();
146+
img.addEventListener('click', function (e) {
147+
e.stopPropagation( );
148+
});
149+
}
150+
}
139151

140-
//
141-
// CLOSE ON OUTSIDE CLICK
142-
//
143-
if (self.store.closeOnOutsideClick === true) {
144-
imageInnerWrap.onclick = () => self.closeIfOpen();
145-
img.addEventListener('click', function (e) {
146-
e.stopPropagation( );
147-
});
152+
// VIDEO
153+
if (currentImageOrVideo.isVideo === true) {
154+
const image = document.createElement('div');
155+
image.setAttribute('class', 'bilderrahmen--image');
156+
wrapper.appendChild(image);
157+
const imageInner = document.createElement('div');
158+
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
159+
image.appendChild(imageInner);
160+
const imageInnerWrap = document.createElement('div');
161+
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
162+
imageInner.appendChild(imageInnerWrap);
163+
const video = document.createElement('video');
164+
video.onload = function () {
165+
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
166+
};
167+
video.setAttribute('poster', currentImageOrVideo.poster);
168+
video.setAttribute('autoplay', '');
169+
video.setAttribute('controls', '');
170+
const source = document.createElement('source');
171+
source.setAttribute('src', currentImageOrVideo.src);
172+
source.setAttribute('type', 'video/mp4');
173+
video.appendChild(source);
174+
video.setAttribute('class', 'bilderrahmen--image-img');
175+
video.setAttribute('id', self._generateId(galleryId, index));
176+
imageInnerWrap.appendChild(video);
177+
//
178+
// CLOSE ON OUTSIDE CLICK
179+
//
180+
if (self.store.closeOnOutsideClick === true) {
181+
imageInnerWrap.onclick = () => self.closeIfOpen();
182+
video.addEventListener('click', function (e) {
183+
e.stopPropagation( );
184+
});
185+
}
148186
}
149187

188+
150189
// NEXT BUTTON
151190
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, (indexInt + 1), 'right'));
152191

@@ -163,7 +202,15 @@ class Bilderrahmen {
163202
const nextIndex = self._getGallery(galleryId).length;
164203
const nextImage = self._getImage(galleryId, nextIndex);
165204
nextImage.title = lightboxElement.getAttribute('data-bilderrahmen-title');
166-
nextImage.src = lightboxElement.parentNode.getAttribute('href');
205+
if (lightboxElement.getAttribute('data-bilderrahmen-video')) {
206+
nextImage.src = lightboxElement.getAttribute('data-bilderrahmen-video');
207+
nextImage.poster = lightboxElement.getAttribute('src');
208+
nextImage.isVideo = true;
209+
} else {
210+
nextImage.src = lightboxElement.parentNode.getAttribute('href');
211+
nextImage.poster = null;
212+
nextImage.isVideo = false;
213+
}
167214

168215
//
169216
// THUMBNAIL CLICK OPENS LIGHTBOX
@@ -202,4 +249,4 @@ class Bilderrahmen {
202249
};
203250
};
204251

205-
export default Bilderrahmen;
252+
export default Bilderrahmen;

‎dist/bilderrahmen.js

+75-27
Original file line numberDiff line numberDiff line change
@@ -182,35 +182,75 @@
182182
// PREVIOUS BUTTON
183183
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, indexInt - 1, 'left'));
184184

185+
var currentImageOrVideo = self._getImage(galleryId, index);
185186
// IMAGE
186-
var image = document.createElement('div');
187-
image.setAttribute('class', 'bilderrahmen--image');
188-
wrapper.appendChild(image);
189-
var imageInner = document.createElement('div');
190-
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
191-
image.appendChild(imageInner);
192-
var imageInnerWrap = document.createElement('div');
193-
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
194-
imageInner.appendChild(imageInnerWrap);
195-
var img = document.createElement('img');
196-
img.onload = function () {
197-
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
198-
};
199-
img.setAttribute('src', self._getImage(galleryId, index).src);
200-
img.setAttribute('class', 'bilderrahmen--image-img');
201-
img.setAttribute('id', self._generateId(galleryId, index));
202-
imageInnerWrap.appendChild(img);
187+
if (currentImageOrVideo.isVideo === false) {
188+
var image = document.createElement('div');
189+
image.setAttribute('class', 'bilderrahmen--image');
190+
wrapper.appendChild(image);
191+
var imageInner = document.createElement('div');
192+
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
193+
image.appendChild(imageInner);
194+
var imageInnerWrap = document.createElement('div');
195+
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
196+
imageInner.appendChild(imageInnerWrap);
197+
var img = document.createElement('img');
198+
img.onload = function () {
199+
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
200+
};
201+
img.setAttribute('src', self._getImage(galleryId, index).src);
202+
img.setAttribute('class', 'bilderrahmen--image-img');
203+
img.setAttribute('id', self._generateId(galleryId, index));
204+
imageInnerWrap.appendChild(img);
205+
//
206+
// CLOSE ON OUTSIDE CLICK
207+
//
208+
if (self.store.closeOnOutsideClick === true) {
209+
imageInnerWrap.onclick = function () {
210+
return self.closeIfOpen();
211+
};
212+
img.addEventListener('click', function (e) {
213+
e.stopPropagation();
214+
});
215+
}
216+
}
203217

204-
//
205-
// CLOSE ON OUTSIDE CLICK
206-
//
207-
if (self.store.closeOnOutsideClick === true) {
208-
imageInnerWrap.onclick = function () {
209-
return self.closeIfOpen();
218+
// VIDEO
219+
if (currentImageOrVideo.isVideo === true) {
220+
var _image = document.createElement('div');
221+
_image.setAttribute('class', 'bilderrahmen--image');
222+
wrapper.appendChild(_image);
223+
var _imageInner = document.createElement('div');
224+
_imageInner.setAttribute('class', 'bilderrahmen--image-inner');
225+
_image.appendChild(_imageInner);
226+
var _imageInnerWrap = document.createElement('div');
227+
_imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
228+
_imageInner.appendChild(_imageInnerWrap);
229+
var video = document.createElement('video');
230+
video.onload = function () {
231+
_image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
210232
};
211-
img.addEventListener('click', function (e) {
212-
e.stopPropagation();
213-
});
233+
video.setAttribute('poster', currentImageOrVideo.poster);
234+
video.setAttribute('autoplay', '');
235+
video.setAttribute('controls', '');
236+
var source = document.createElement('source');
237+
source.setAttribute('src', currentImageOrVideo.src);
238+
source.setAttribute('type', 'video/mp4');
239+
video.appendChild(source);
240+
video.setAttribute('class', 'bilderrahmen--image-img');
241+
video.setAttribute('id', self._generateId(galleryId, index));
242+
_imageInnerWrap.appendChild(video);
243+
//
244+
// CLOSE ON OUTSIDE CLICK
245+
//
246+
if (self.store.closeOnOutsideClick === true) {
247+
_imageInnerWrap.onclick = function () {
248+
return self.closeIfOpen();
249+
};
250+
video.addEventListener('click', function (e) {
251+
e.stopPropagation();
252+
});
253+
}
214254
}
215255

216256
// NEXT BUTTON
@@ -230,7 +270,15 @@
230270
var nextIndex = self._getGallery(galleryId).length;
231271
var nextImage = self._getImage(galleryId, nextIndex);
232272
nextImage.title = lightboxElement.getAttribute('data-bilderrahmen-title');
233-
nextImage.src = lightboxElement.parentNode.getAttribute('href');
273+
if (lightboxElement.getAttribute('data-bilderrahmen-video')) {
274+
nextImage.src = lightboxElement.getAttribute('data-bilderrahmen-video');
275+
nextImage.poster = lightboxElement.getAttribute('src');
276+
nextImage.isVideo = true;
277+
} else {
278+
nextImage.src = lightboxElement.parentNode.getAttribute('href');
279+
nextImage.poster = null;
280+
nextImage.isVideo = false;
281+
}
234282

235283
//
236284
// THUMBNAIL CLICK OPENS LIGHTBOX

‎dist/bilderrahmen.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)