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.

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
Show file tree
Hide file tree
Changes from 28 commits
Commits
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
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
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
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