Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Video Support #137

Open
wants to merge 30 commits into
base: dev
Choose a base branch
from
Open

Added Video Support #137

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
dc68d00
Added Video Support
Jan 2, 2017
a84b2bb
Added Video Support
Jan 2, 2017
a341970
Added Video Support
Jan 2, 2017
6b5ec5f
Added Video Support
Jan 2, 2017
e4b95f7
Added Video Support
Jan 2, 2017
662130e
Added Video Support
Jan 2, 2017
fd0bb45
Added Video Support
Jan 2, 2017
ef8639d
Removed Console Logs
Jan 2, 2017
1ef2c62
Removed Console Logs
Jan 2, 2017
24935f8
Removed Console Logs
Jan 2, 2017
7f5f62d
Removing Dist File
Jan 3, 2017
9827746
Removed Dist Files
Jan 3, 2017
3828e6d
Removed Dist Files
Jan 3, 2017
9a17e2b
Removed Dist Files
Jan 3, 2017
8f558e4
Removing Unmodified Files
Jan 3, 2017
4f05c46
Removing Unmodified Files
Jan 3, 2017
8d6b47d
Reverted changes
Jan 3, 2017
8f9faf1
Revereted Changes
Jan 3, 2017
0034778
Reverted Changes
Jan 3, 2017
c49d9f4
Reverted Changes
Jan 3, 2017
87ac750
Updating Linting Errors
Jan 4, 2017
39e4152
Removed unecessary empty space
Jan 4, 2017
12b0eeb
Updated Linting Warnings
Jan 4, 2017
af7da8b
Fixed the issues mentioned by @XhmikosR
May 22, 2017
250e5a3
Fixed the issues mentioned by @XhmikosR #2
May 22, 2017
acf93a1
Fixed the issues mentioned by @XhmikosR #3
May 22, 2017
f8d7c97
Fixed the issues mentioned by @XhmikosR #4
May 22, 2017
44e4819
Fixed the issues mentioned by @XhmikosR #5 (Merged)
May 22, 2017
ef25913
Update index.html
May 30, 2017
a4cb9b8
Update baguetteBox.js
May 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shouldn't be here.

<!doctype html>
<html lang="en">
<head>
Expand Down
113 changes: 92 additions & 21 deletions src/baguetteBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,10 @@
var touch = {};
// If set to true ignore touch events because animation was already fired
var touchFlag = false;
// Regex pattern to match image files
var regex = /.+\.(gif|jpe?g|png|webp)/i;
// Regex pattern to match image & video files
var regex = /.+\.(gif|jpe?g|png|webp|mp4|webm)/i;
// Pattern to match only videos
var videoRegex = /.+\.(mp4|webm)/i;
// Object of all used galleries
var data = {};
// Array containing temporary images DOM elements
Expand Down Expand Up @@ -467,21 +469,36 @@
options.afterHide();
}
}, 500);

pauseAnyVideoPlaying();

documentLastFocus.focus();
}

function pauseAnyVideoPlaying() {
[].forEach.call(imagesElements, function(imageElement) {
if (imageElement.getElementsByTagName('video').length > 0) {
imageElement.getElementsByTagName('video')[0].pause();
}
});
}

function loadImage(index, callback) {
var imageContainer = imagesElements[index];
var galleryItem = currentGallery[index];
var isVideo = false;
if (typeof imageContainer !== 'undefined') {
isVideo = videoRegex.test(galleryItem.imageElement.href);
}

// Return if the index exceeds prepared images in the overlay
// or if the current gallery has been changed / closed
if (imageContainer === undefined || galleryItem === undefined) {
if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined') {
return;
}

// If image is already loaded run callback and return
if (imageContainer.getElementsByTagName('img')[0]) {
// If image is already loaded run callback and return OR If video is already loaded run callback and return
if ((imageContainer.getElementsByTagName('img')[0] && !isVideo) || (imageContainer.getElementsByTagName('video')[0] && isVideo)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the && !isVideo needed?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it is needed

if (callback) {
callback();
}
Expand All @@ -490,11 +507,11 @@

// Get element reference, optional caption and source path
var imageElement = galleryItem.imageElement;
var thumbnailElement = imageElement.getElementsByTagName('img')[0];
var thumbnailElement = isVideo ? imageElement.getElementsByTagName('video')[0] : imageElement.getElementsByTagName('img')[0];
var imageCaption = typeof options.captions === 'function' ?
options.captions.call(currentGallery, imageElement) :
imageElement.getAttribute('data-caption') || imageElement.title;
var imageSrc = getImageSrc(imageElement);
var imageSrc = isVideo ? getVideoSrc(imageElement) : getImageSrc(imageElement);

// Prepare figure element
var figure = create('figure');
Expand All @@ -512,29 +529,79 @@
}
imageContainer.appendChild(figure);

// Prepare gallery img element
var image = create('img');
image.onload = function() {
// Remove loader element
var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner');
figure.removeChild(spinner);
if (!options.async && callback) {
callback();
if (isVideo) {
// Prepare gallery video element
var video = create('video');
//video.onload = function() {
video.addEventListener('loadeddata', function() {
//Remove loader element
var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner');
figure.removeChild(spinner);
if (!options.async && callback) {
callback();
}
});
var source = create('source');
source.setAttribute('src', imageSrc);
video.appendChild(source);
if (options.titleTag && imageCaption) {
video.title = imageCaption;
}
};
image.setAttribute('src', imageSrc);
image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
if (options.titleTag && imageCaption) {
image.title = imageCaption;
figure.appendChild(video);
} else {
// Prepare gallery img element
var image = create('img');
image.onload = function() {
// Remove loader element
var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner');
figure.removeChild(spinner);
if (!options.async && callback) {
callback();
}
};
image.setAttribute('src', imageSrc);
image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
if (options.titleTag && imageCaption) {
image.title = imageCaption;
}
figure.appendChild(image);
}
figure.appendChild(image);

// Run callback
if (options.async && callback) {
callback();
}
}

// Get video source location, mostly used for responsive images
function getVideoSrc(image) {
// Set default image path from href
var result = image.getElementsByTagName('video')[0].getElementsByTagName('source')[0].src;
// If dataset is supported find the most suitable image
if (image.dataset) {
var srcs = [];
// Get all possible image versions depending on the resolution
for (var item in image.dataset) {
if (item.substring(0, 3) === 'at-' && !isNaN(item.substring(3))) {
srcs[item.replace('at-', '')] = image.dataset[item];
}
}
// Sort resolutions ascending
var keys = Object.keys(srcs).sort(function(a, b) {
return parseInt(a, 10) < parseInt(b, 10) ? -1 : 1;
});
// Get real screen resolution
var width = window.innerWidth * window.devicePixelRatio;
// Find the first image bigger than or equal to the current width
var i = 0;
while (i < keys.length - 1 && keys[i] < width) {
i++;
}
result = srcs[keys[i]] || result;
}
return result;
}

// Get image source location, mostly used for responsive images
function getImageSrc(image) {
// Set default image path from href
Expand Down Expand Up @@ -609,6 +676,7 @@
}

function updateOffset() {
pauseAnyVideoPlaying();
var offset = -currentIndex * 100 + '%';
if (options.animation === 'fadeIn') {
slider.style.opacity = 0;
Expand All @@ -625,6 +693,9 @@
slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)'
: slider.style.left = offset;
}
if (imagesElements[currentIndex].getElementsByTagName('video').length > 0) {
imagesElements[currentIndex].getElementsByTagName('video')[0].play();
}
}

// CSS 3D Transforms test
Expand Down
3 changes: 2 additions & 1 deletion src/baguetteBox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
height: 100%; // Opera 12 image stretching fix
}

img {
img, video {
// IE8 fix
display: inline-block;
width: auto;
Expand All @@ -48,6 +48,7 @@
box-shadow: 0 0 8px rgba(0,0,0,.6);
}


figcaption {
display: block;
position: absolute;
Expand Down