From dc68d00780adec33556b29e37fbb7cb7632c23d5 Mon Sep 17 00:00:00 2001 From: ranjankumarzonup Date: Mon, 2 Jan 2017 10:50:41 +0530 Subject: [PATCH 01/30] Added Video Support --- src/baguetteBox.js | 120 ++++++++++++++++++++++++++++++++++++++------- 1 file changed, 101 insertions(+), 19 deletions(-) diff --git a/src/baguetteBox.js b/src/baguetteBox.js index 9f6946d5..bb143fed 100644 --- a/src/baguetteBox.js +++ b/src/baguetteBox.js @@ -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 @@ -467,12 +469,25 @@ 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(imageContainer != undefined) isVideo = videoRegex.test(galleryItem.imageElement.href); + console.log("isVideo", isVideo); + console.log("imageContainer", imageContainer); // Return if the index exceeds prepared images in the overlay // or if the current gallery has been changed / closed @@ -481,7 +496,15 @@ } // If image is already loaded run callback and return - if (imageContainer.getElementsByTagName('img')[0]) { + if (imageContainer.getElementsByTagName('img')[0] && !isVideo) { + if (callback) { + callback(); + } + return; + } + + // If video is already loaded run callback and return + if (imageContainer.getElementsByTagName('video')[0] && isVideo) { if (callback) { callback(); } @@ -490,11 +513,15 @@ // Get element reference, optional caption and source path var imageElement = galleryItem.imageElement; - var thumbnailElement = imageElement.getElementsByTagName('img')[0]; + var thumbnailElement = null; + if(isVideo) thumbnailElement = imageElement.getElementsByTagName('video')[0]; + else thumbnailElement = 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 = null; + if(isVideo) imageSrc = getVideoSrc(imageElement); + else imageSrc = getImageSrc(imageElement); // Prepare figure element var figure = create('figure'); @@ -512,22 +539,45 @@ } 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) { @@ -535,6 +585,35 @@ } } + // 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 @@ -609,6 +688,7 @@ } function updateOffset() { + pauseAnyVideoPlaying(); var offset = -currentIndex * 100 + '%'; if (options.animation === 'fadeIn') { slider.style.opacity = 0; @@ -625,6 +705,8 @@ 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 From a84b2bb8e192ce90c329a14d52f0c0cb960ff8d8 Mon Sep 17 00:00:00 2001 From: ranjankumarzonup Date: Mon, 2 Jan 2017 10:51:10 +0530 Subject: [PATCH 02/30] Added Video Support --- src/baguetteBox.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/baguetteBox.scss b/src/baguetteBox.scss index 5fa07604..b2bbae21 100644 --- a/src/baguetteBox.scss +++ b/src/baguetteBox.scss @@ -36,7 +36,7 @@ height: 100%; // Opera 12 image stretching fix } - img { + img, video { // IE8 fix display: inline-block; width: auto; @@ -48,6 +48,7 @@ box-shadow: 0 0 8px rgba(0,0,0,.6); } + figcaption { display: block; position: absolute; From a3419708a11e8efb9401f1980f7aff792bccc10f Mon Sep 17 00:00:00 2001 From: ranjankumarzonup Date: Mon, 2 Jan 2017 10:51:52 +0530 Subject: [PATCH 03/30] Added Video Support --- dist/baguetteBox.js | 130 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 108 insertions(+), 22 deletions(-) diff --git a/dist/baguetteBox.js b/dist/baguetteBox.js index 6cdfbb2c..bb143fed 100644 --- a/dist/baguetteBox.js +++ b/dist/baguetteBox.js @@ -1,7 +1,7 @@ /*! * baguetteBox.js * @author feimosi - * @version 1.8.1 + * @version %%INJECT_VERSION%% * @url https://github.com/feimosi/baguetteBox.js */ @@ -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 @@ -467,17 +469,42 @@ 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]; - if (typeof imageContainer === 'undefined') { + var galleryItem = currentGallery[index]; + var isVideo = false; + if(imageContainer != undefined) isVideo = videoRegex.test(galleryItem.imageElement.href); + console.log("isVideo", isVideo); + console.log("imageContainer", imageContainer); + + // Return if the index exceeds prepared images in the overlay + // or if the current gallery has been changed / closed + if (imageContainer === undefined || galleryItem === undefined) { return; } // If image is already loaded run callback and return - if (imageContainer.getElementsByTagName('img')[0]) { + if (imageContainer.getElementsByTagName('img')[0] && !isVideo) { + if (callback) { + callback(); + } + return; + } + + // If video is already loaded run callback and return + if (imageContainer.getElementsByTagName('video')[0] && isVideo) { if (callback) { callback(); } @@ -485,12 +512,16 @@ } // Get element reference, optional caption and source path - var imageElement = currentGallery[index].imageElement; - var thumbnailElement = imageElement.getElementsByTagName('img')[0]; + var imageElement = galleryItem.imageElement; + var thumbnailElement = null; + if(isVideo) thumbnailElement = imageElement.getElementsByTagName('video')[0]; + else thumbnailElement = 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 = null; + if(isVideo) imageSrc = getVideoSrc(imageElement); + else imageSrc = getImageSrc(imageElement); // Prepare figure element var figure = create('figure'); @@ -508,22 +539,45 @@ } 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) { @@ -531,6 +585,35 @@ } } + // 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 @@ -605,6 +688,7 @@ } function updateOffset() { + pauseAnyVideoPlaying(); var offset = -currentIndex * 100 + '%'; if (options.animation === 'fadeIn') { slider.style.opacity = 0; @@ -621,6 +705,8 @@ 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 From 6b5ec5f3b2b0964b5d780c8af5b6e1f8163efe4e Mon Sep 17 00:00:00 2001 From: ranjankumarzonup Date: Mon, 2 Jan 2017 10:52:19 +0530 Subject: [PATCH 04/30] Added Video Support --- dist/baguetteBox.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/baguetteBox.min.js b/dist/baguetteBox.min.js index 712ff84f..957fc370 100644 --- a/dist/baguetteBox.min.js +++ b/dist/baguetteBox.min.js @@ -4,4 +4,4 @@ * @version 1.8.1 * @url https://github.com/feimosi/baguetteBox.js */ -!function(t,e){"use strict";"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e():t.baguetteBox=e()}(this,function(){"use strict";function t(t,n){M.transforms=k(),M.svg=w(),i(),o(t),e(t,n)}function e(t,e){var n=document.querySelectorAll(t),o={galleries:[],nodeList:n};U[t]=o,[].forEach.call(n,function(t){e&&e.filter&&(V=e.filter);var n=[];if(n="A"===t.tagName?[t]:t.getElementsByTagName("a"),n=[].filter.call(n,function(t){return V.test(t.href)}),0!==n.length){var i=[];[].forEach.call(n,function(t,n){var o=function(t){t.preventDefault?t.preventDefault():t.returnValue=!1,u(i,e),c(n)},a={eventHandler:o,imageElement:t};E(t,"click",o),i.push(a)}),o.galleries.push(i)}})}function n(){for(var t in U)U.hasOwnProperty(t)&&o(t)}function o(t){if(U.hasOwnProperty(t)){var e=U[t].galleries;[].forEach.call(e,function(t){[].forEach.call(t,function(t){B(t.imageElement,"click",t.eventHandler)}),R===t&&(R=[])}),delete U[t]}}function i(){return(S=T("baguetteBox-overlay"))?(P=T("baguetteBox-slider"),F=T("previous-button"),H=T("next-button"),void(L=T("close-button"))):(S=N("div"),S.setAttribute("role","dialog"),S.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(S),P=N("div"),P.id="baguetteBox-slider",S.appendChild(P),F=N("button"),F.setAttribute("type","button"),F.id="previous-button",F.setAttribute("aria-label","Previous"),F.innerHTML=M.svg?I:"<",S.appendChild(F),H=N("button"),H.setAttribute("type","button"),H.id="next-button",H.setAttribute("aria-label","Next"),H.innerHTML=M.svg?Y:">",S.appendChild(H),L=N("button"),L.setAttribute("type","button"),L.id="close-button",L.setAttribute("aria-label","Close"),L.innerHTML=M.svg?q:"×",S.appendChild(L),F.className=H.className=L.className="baguetteBox-button",void r())}function a(t){switch(t.keyCode){case 37:v();break;case 39:h();break;case 27:p()}}function r(){E(S,"click",J),E(F,"click",K),E(H,"click",Q),E(L,"click",Z),E(S,"touchstart",$),E(S,"touchmove",_),E(S,"touchend",tt),E(document,"focus",et,!0)}function l(){B(S,"click",J),B(F,"click",K),B(H,"click",Q),B(L,"click",Z),B(S,"touchstart",$),B(S,"touchmove",_),B(S,"touchend",tt),B(document,"focus",et,!0)}function u(t,e){if(R!==t){for(R=t,s(e);P.firstChild;)P.removeChild(P.firstChild);W.length=0;for(var n,o=[],i=[],a=0;a
',j.captions&&a){var u=N("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=a,l.appendChild(u)}n.appendChild(l);var s=N("img");s.onload=function(){var n=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(n),!j.async&&e&&e()},s.setAttribute("src",r),s.alt=i?i.alt||"":"",j.titleTag&&a&&(s.title=a),l.appendChild(s),j.async&&e&&e()}}function b(t){var e=t.href;if(t.dataset){var n=[];for(var o in t.dataset)"at-"!==o.substring(0,3)||isNaN(o.substring(3))||(n[o.replace("at-","")]=t.dataset[o]);for(var i=Object.keys(n).sort(function(t,e){return parseInt(t,10)=1?(z--,y(),C(z),t=!0):j.animation&&(P.className="bounce-from-left",setTimeout(function(){P.className=""},400),t=!1),j.onChange&&j.onChange(z,W.length),t}function y(){var t=100*-z+"%";"fadeIn"===j.animation?(P.style.opacity=0,setTimeout(function(){M.transforms?P.style.transform=P.style.webkitTransform="translate3d("+t+",0,0)":P.style.left=t,P.style.opacity=1},400)):M.transforms?P.style.transform=P.style.webkitTransform="translate3d("+t+",0,0)":P.style.left=t}function k(){var t=N("div");return"undefined"!=typeof t.style.perspective||"undefined"!=typeof t.style.webkitPerspective}function w(){var t=N("div");return t.innerHTML="","http://www.w3.org/2000/svg"===(t.firstChild&&t.firstChild.namespaceURI)}function x(t){t-z>=j.preload||m(t+1,function(){x(t+1)})}function C(t){z-t>=j.preload||m(t-1,function(){C(t-1)})}function E(t,e,n,o){t.addEventListener?t.addEventListener(e,n,o):t.attachEvent("on"+e,n)}function B(t,e,n,o){t.removeEventListener?t.removeEventListener(e,n,o):t.detachEvent("on"+e,n)}function T(t){return document.getElementById(t)}function N(t){return document.createElement(t)}function A(){l(),n(),B(document,"keydown",a),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),U={},R=[],z=0}var S,P,F,H,L,I='',Y='',q='',j={},X={captions:!0,fullScreen:!1,noScrollbars:!1,titleTag:!1,buttons:"auto",async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)"},M={},R=[],z=0,D={},O=!1,V=/.+\.(gif|jpe?g|png|webp)/i,U={},W=[],G=null,J=function(t){t.target.id.indexOf("baguette-img")!==-1&&p()},K=function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0,v()},Q=function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0,h()},Z=function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0,p()},$=function(t){D.count++,D.count>1&&(D.multitouch=!0),D.startX=t.changedTouches[0].pageX,D.startY=t.changedTouches[0].pageY},_=function(t){if(!O&&!D.multitouch){t.preventDefault?t.preventDefault():t.returnValue=!1;var e=t.touches[0]||t.changedTouches[0];e.pageX-D.startX>40?(O=!0,v()):e.pageX-D.startX<-40?(O=!0,h()):D.startY-e.pageY>100&&p()}},tt=function(){D.count--,D.count<=0&&(D.multitouch=!1),O=!1},et=function(t){"block"!==S.style.display||S.contains(t.target)||(t.stopPropagation(),d())};return[].forEach||(Array.prototype.forEach=function(t,e){for(var n=0;n0&&a.getElementsByTagName("video")[0].pause()})}function S(a,b){var c=s[a],e=l[a],f=!1;if(void 0!=c&&(f=q.test(e.imageElement.href)),console.log("isVideo",f),console.log("imageContainer",c),void 0!==c&&void 0!==e){if(c.getElementsByTagName("img")[0]&&!f)return void(b&&b());if(c.getElementsByTagName("video")[0]&&f)return void(b&&b());var g=e.imageElement,h=null;h=f?g.getElementsByTagName("video")[0]:g.getElementsByTagName("img")[0];var i="function"==typeof d.captions?d.captions.call(l,g):g.getAttribute("data-caption")||g.title,j=null;j=f?T(g):U(g);var k=da("figure");if(k.id="baguetteBox-figure-"+a,k.innerHTML='
',d.captions&&i){var m=da("figcaption");m.id="baguetteBox-figcaption-"+a,m.innerHTML=i,k.appendChild(m)}if(c.appendChild(k),f){var n=da("video");n.addEventListener("loadeddata",function(){var c=document.querySelector("#baguette-img-"+a+" .baguetteBox-spinner");k.removeChild(c),!d.async&&b&&b()});var o=da("source");o.setAttribute("src",j),n.appendChild(o),d.titleTag&&i&&(n.title=i),k.appendChild(n)}else{var p=da("img");p.onload=function(){var c=document.querySelector("#baguette-img-"+a+" .baguetteBox-spinner");k.removeChild(c),!d.async&&b&&b()},p.setAttribute("src",j),p.alt=h?h.alt||"":"",d.titleTag&&i&&(p.title=i),k.appendChild(p)}d.async&&b&&b()}}function T(a){var b=a.getElementsByTagName("video")[0].getElementsByTagName("source")[0].src;if(a.dataset){var c=[];for(var d in a.dataset)"at-"!==d.substring(0,3)||isNaN(d.substring(3))||(c[d.replace("at-","")]=a.dataset[d]);for(var e=Object.keys(c).sort(function(a,b){return parseInt(a,10)=1?(m--,X(),_(m),a=!0):d.animation&&(h.className="bounce-from-left",setTimeout(function(){h.className=""},400),a=!1),d.onChange&&d.onChange(m,s.length),a}function X(){R();var a=100*-m+"%";"fadeIn"===d.animation?(h.style.opacity=0,setTimeout(function(){f.transforms?h.style.transform=h.style.webkitTransform="translate3d("+a+",0,0)":h.style.left=a,h.style.opacity=1},400)):f.transforms?h.style.transform=h.style.webkitTransform="translate3d("+a+",0,0)":h.style.left=a,s[m].getElementsByTagName("video").length>0&&s[m].getElementsByTagName("video")[0].play()}function Y(){var a=da("div");return"undefined"!=typeof a.style.perspective||"undefined"!=typeof a.style.webkitPerspective}function Z(){var a=da("div");return a.innerHTML="","http://www.w3.org/2000/svg"===(a.firstChild&&a.firstChild.namespaceURI)}function $(a){a-m>=d.preload||S(a+1,function(){$(a+1)})}function _(a){m-a>=d.preload||S(a-1,function(){_(a-1)})}function aa(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d):a.attachEvent("on"+b,c)}function ba(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d):a.detachEvent("on"+b,c)}function ca(a){return document.getElementById(a)}function da(a){return document.createElement(a)}function ea(){J(),E(),ba(document,"keydown",H),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),r={},l=[],m=0}var g,h,i,j,k,a='',b='',c='',d={},e={captions:!0,fullScreen:!1,noScrollbars:!1,titleTag:!1,buttons:"auto",async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)"},f={},l=[],m=0,n={},o=!1,p=/.+\.(gif|jpe?g|png|webp|mp4|webm)/i,q=/.+\.(mp4|webm)/i,r={},s=[],t=null,u=function(a){a.target.id.indexOf("baguette-img")!==-1&&Q()},v=function(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0,W()},w=function(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0,V()},x=function(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0,Q()},y=function(a){n.count++,n.count>1&&(n.multitouch=!0),n.startX=a.changedTouches[0].pageX,n.startY=a.changedTouches[0].pageY},z=function(a){if(!o&&!n.multitouch){a.preventDefault?a.preventDefault():a.returnValue=!1;var b=a.touches[0]||a.changedTouches[0];b.pageX-n.startX>40?(o=!0,W()):b.pageX-n.startX<-40?(o=!0,V()):n.startY-b.pageY>100&&Q()}},A=function(){n.count--,n.count<=0&&(n.multitouch=!1),o=!1},B=function(a){"block"!==g.style.display||g.contains(a.target)||(a.stopPropagation(),N())};return[].forEach||(Array.prototype.forEach=function(a,b){for(var c=0;c Date: Mon, 2 Jan 2017 10:53:01 +0530 Subject: [PATCH 05/30] Added Video Support --- dist/baguetteBox.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/baguetteBox.css b/dist/baguetteBox.css index 4fd43b41..fae03e95 100644 --- a/dist/baguetteBox.css +++ b/dist/baguetteBox.css @@ -30,7 +30,7 @@ display: inline; margin: 0; height: 100%; } - #baguetteBox-overlay .full-image img { + #baguetteBox-overlay .full-image img, #baguetteBox-overlay .full-image video{ display: inline-block; width: auto; height: auto; From 662130e18e5aaac55fec8f92159103c9268c8ccb Mon Sep 17 00:00:00 2001 From: ranjankumarzonup Date: Mon, 2 Jan 2017 10:53:30 +0530 Subject: [PATCH 06/30] Added Video Support --- dist/baguetteBox.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/baguetteBox.min.css b/dist/baguetteBox.min.css index a42ff9cb..eacd590e 100644 --- a/dist/baguetteBox.min.css +++ b/dist/baguetteBox.min.css @@ -3,4 +3,4 @@ * @author feimosi * @version 1.8.1 * @url https://github.com/feimosi/baguetteBox.js - */#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}} \ No newline at end of file + */#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img, #baguetteBox-overlay .full-image video{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}} From fd0bb458f653f434f6949f43e6c2a553ace5df48 Mon Sep 17 00:00:00 2001 From: ranjankumarzonup Date: Mon, 2 Jan 2017 10:54:12 +0530 Subject: [PATCH 07/30] Added Video Support --- demo/index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/demo/index.html b/demo/index.html index b5e8288a..a963bc46 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,7 +5,7 @@ baguetteBox.js | Demo - +