Skip to content

Commit

Permalink
0.3.0 mp4 video support
Browse files Browse the repository at this point in the history
  • Loading branch information
clouless committed Feb 23, 2018
1 parent 8194f00 commit 18216e8
Show file tree
Hide file tree
Showing 13 changed files with 3,072 additions and 257 deletions.
18 changes: 14 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
* image title support
* responsive
* inline SVG buttons
* MP4 video support (HTML 5 video)
* minified: js 4.7 KB css 4.2 KB total 8.9 KB
* gzipped: js 1.5 KB css 2.0 KB total 3.5 KB

Expand All @@ -37,15 +38,24 @@
```html
<html>
<body>
<link href="https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.css" rel="stylesheet" />

<a href="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/images/DSC05104.JPG" target="_blank"><img
src="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/thumbs/DSC05104.JPG"
data-bilderrahmen="gallery-02"
data-bilderrahmen-title="Image Four"
/></a>

<!-- Video only supports MP4 and one video source! -->
<a href="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4" target="_blank"><img
src="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p-poster.jpg"
style="width:200px;border:1px solid #ccc"
data-bilderrahmen-video="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4"
data-bilderrahmen="gallery-02"
data-bilderrahmen-title="Video One"
/></a>

<script src="https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.min.js"></script>
<script src="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.js"></script>
<script>
new bilderrahmen({
closeOnOutsideClick: true
Expand Down Expand Up @@ -81,14 +91,14 @@ Load css from `node_modules/bilderrahmen/dist/bilderrahmen.min.css`
```html
<html>
<body>
<link href="https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/systemjs/systemjs/0.20.9/dist/system.js"></script>
<script>
SystemJS.config({
map: {
'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/plugin-babel.js',
'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/systemjs-babel-browser.js',
'bilderrahmen': 'https://unpkg.com/bilderrahmen@0.2.2/dist/bilderrahmen.esm.js'
'bilderrahmen': 'https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.esm.js'
},
transpiler: 'plugin-babel'
});
Expand Down
3 changes: 2 additions & 1 deletion dist/bilderrahmen.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* @license MIT
* Copyright (c) 2017 Bernhard Grünewaldt
* Copyright (c) 2017 - 2018 Bernhard Grünewaldt
* https://github.com/codeclou/bilderrahmen
*/
.bilderrahmen-wrapper {
Expand Down Expand Up @@ -97,3 +97,4 @@
height:auto;
width:auto;
}

103 changes: 75 additions & 28 deletions dist/bilderrahmen.esm.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* @license MIT
* Copyright (c) 2017 Bernhard Grünewaldt
* Copyright (c) 2017 - 2018 Bernhard Grünewaldt
* https://github.com/codeclou/bilderrahmen
*/
class Bilderrahmen {
Expand Down Expand Up @@ -118,35 +118,74 @@ class Bilderrahmen {
// PREVIOUS BUTTON
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, (indexInt - 1), 'left'));

const currentImageOrVideo = self._getImage(galleryId, index);
// IMAGE
const image = document.createElement('div');
image.setAttribute('class', 'bilderrahmen--image');
wrapper.appendChild(image);
const imageInner = document.createElement('div');
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
image.appendChild(imageInner);
const imageInnerWrap = document.createElement('div');
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
imageInner.appendChild(imageInnerWrap);
const img = document.createElement('img');
img.onload = function () {
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
};
img.setAttribute('src', self._getImage(galleryId, index).src);
img.setAttribute('class', 'bilderrahmen--image-img');
img.setAttribute('id', self._generateId(galleryId, index));
imageInnerWrap.appendChild(img);
if (currentImageOrVideo.isVideo === false) {
const image = document.createElement('div');
image.setAttribute('class', 'bilderrahmen--image');
wrapper.appendChild(image);
const imageInner = document.createElement('div');
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
image.appendChild(imageInner);
const imageInnerWrap = document.createElement('div');
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
imageInner.appendChild(imageInnerWrap);
const img = document.createElement('img');
img.onload = function () {
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
};
img.setAttribute('src', self._getImage(galleryId, index).src);
img.setAttribute('class', 'bilderrahmen--image-img');
img.setAttribute('id', self._generateId(galleryId, index));
imageInnerWrap.appendChild(img);
//
// CLOSE ON OUTSIDE CLICK
//
if (self.store.closeOnOutsideClick === true) {
imageInnerWrap.onclick = () => self.closeIfOpen();
img.addEventListener('click', function (e) {
e.stopPropagation( );
});
}
}

//
// CLOSE ON OUTSIDE CLICK
//
if (self.store.closeOnOutsideClick === true) {
imageInnerWrap.onclick = () => self.closeIfOpen();
img.addEventListener('click', function (e) {
e.stopPropagation( );
});
// VIDEO
if (currentImageOrVideo.isVideo === true) {
const image = document.createElement('div');
image.setAttribute('class', 'bilderrahmen--image');
wrapper.appendChild(image);
const imageInner = document.createElement('div');
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
image.appendChild(imageInner);
const imageInnerWrap = document.createElement('div');
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
imageInner.appendChild(imageInnerWrap);
const video = document.createElement('video');
video.onload = function () {
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
};
video.setAttribute('poster', currentImageOrVideo.poster);
video.setAttribute('autoplay', '');
video.setAttribute('controls', '');
const source = document.createElement('source');
source.setAttribute('src', currentImageOrVideo.src);
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
video.setAttribute('class', 'bilderrahmen--image-img');
video.setAttribute('id', self._generateId(galleryId, index));
imageInnerWrap.appendChild(video);
//
// CLOSE ON OUTSIDE CLICK
//
if (self.store.closeOnOutsideClick === true) {
imageInnerWrap.onclick = () => self.closeIfOpen();
video.addEventListener('click', function (e) {
e.stopPropagation( );
});
}
}


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

Expand All @@ -163,7 +202,15 @@ class Bilderrahmen {
const nextIndex = self._getGallery(galleryId).length;
const nextImage = self._getImage(galleryId, nextIndex);
nextImage.title = lightboxElement.getAttribute('data-bilderrahmen-title');
nextImage.src = lightboxElement.parentNode.getAttribute('href');
if (lightboxElement.getAttribute('data-bilderrahmen-video')) {
nextImage.src = lightboxElement.getAttribute('data-bilderrahmen-video');
nextImage.poster = lightboxElement.getAttribute('src');
nextImage.isVideo = true;
} else {
nextImage.src = lightboxElement.parentNode.getAttribute('href');
nextImage.poster = null;
nextImage.isVideo = false;
}

//
// THUMBNAIL CLICK OPENS LIGHTBOX
Expand Down Expand Up @@ -202,4 +249,4 @@ class Bilderrahmen {
};
};

export default Bilderrahmen;
export default Bilderrahmen;
102 changes: 75 additions & 27 deletions dist/bilderrahmen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,35 +182,75 @@
// PREVIOUS BUTTON
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, indexInt - 1, 'left'));

var currentImageOrVideo = self._getImage(galleryId, index);
// IMAGE
var image = document.createElement('div');
image.setAttribute('class', 'bilderrahmen--image');
wrapper.appendChild(image);
var imageInner = document.createElement('div');
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
image.appendChild(imageInner);
var imageInnerWrap = document.createElement('div');
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
imageInner.appendChild(imageInnerWrap);
var img = document.createElement('img');
img.onload = function () {
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
};
img.setAttribute('src', self._getImage(galleryId, index).src);
img.setAttribute('class', 'bilderrahmen--image-img');
img.setAttribute('id', self._generateId(galleryId, index));
imageInnerWrap.appendChild(img);
if (currentImageOrVideo.isVideo === false) {
var image = document.createElement('div');
image.setAttribute('class', 'bilderrahmen--image');
wrapper.appendChild(image);
var imageInner = document.createElement('div');
imageInner.setAttribute('class', 'bilderrahmen--image-inner');
image.appendChild(imageInner);
var imageInnerWrap = document.createElement('div');
imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
imageInner.appendChild(imageInnerWrap);
var img = document.createElement('img');
img.onload = function () {
image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
};
img.setAttribute('src', self._getImage(galleryId, index).src);
img.setAttribute('class', 'bilderrahmen--image-img');
img.setAttribute('id', self._generateId(galleryId, index));
imageInnerWrap.appendChild(img);
//
// CLOSE ON OUTSIDE CLICK
//
if (self.store.closeOnOutsideClick === true) {
imageInnerWrap.onclick = function () {
return self.closeIfOpen();
};
img.addEventListener('click', function (e) {
e.stopPropagation();
});
}
}

//
// CLOSE ON OUTSIDE CLICK
//
if (self.store.closeOnOutsideClick === true) {
imageInnerWrap.onclick = function () {
return self.closeIfOpen();
// VIDEO
if (currentImageOrVideo.isVideo === true) {
var _image = document.createElement('div');
_image.setAttribute('class', 'bilderrahmen--image');
wrapper.appendChild(_image);
var _imageInner = document.createElement('div');
_imageInner.setAttribute('class', 'bilderrahmen--image-inner');
_image.appendChild(_imageInner);
var _imageInnerWrap = document.createElement('div');
_imageInnerWrap.setAttribute('class', 'bilderrahmen--image-inner-wrap');
_imageInner.appendChild(_imageInnerWrap);
var video = document.createElement('video');
video.onload = function () {
_image.setAttribute('class', 'bilderrahmen--image bilderrahmen--image-loaded');
};
img.addEventListener('click', function (e) {
e.stopPropagation();
});
video.setAttribute('poster', currentImageOrVideo.poster);
video.setAttribute('autoplay', '');
video.setAttribute('controls', '');
var source = document.createElement('source');
source.setAttribute('src', currentImageOrVideo.src);
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
video.setAttribute('class', 'bilderrahmen--image-img');
video.setAttribute('id', self._generateId(galleryId, index));
_imageInnerWrap.appendChild(video);
//
// CLOSE ON OUTSIDE CLICK
//
if (self.store.closeOnOutsideClick === true) {
_imageInnerWrap.onclick = function () {
return self.closeIfOpen();
};
video.addEventListener('click', function (e) {
e.stopPropagation();
});
}
}

// NEXT BUTTON
Expand All @@ -230,7 +270,15 @@
var nextIndex = self._getGallery(galleryId).length;
var nextImage = self._getImage(galleryId, nextIndex);
nextImage.title = lightboxElement.getAttribute('data-bilderrahmen-title');
nextImage.src = lightboxElement.parentNode.getAttribute('href');
if (lightboxElement.getAttribute('data-bilderrahmen-video')) {
nextImage.src = lightboxElement.getAttribute('data-bilderrahmen-video');
nextImage.poster = lightboxElement.getAttribute('src');
nextImage.isVideo = true;
} else {
nextImage.src = lightboxElement.parentNode.getAttribute('href');
nextImage.poster = null;
nextImage.isVideo = false;
}

//
// THUMBNAIL CLICK OPENS LIGHTBOX
Expand Down
2 changes: 1 addition & 1 deletion dist/bilderrahmen.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 18216e8

Please sign in to comment.