slidebox-js
Version:
A jQuery plugin for easy creation of responsive lightbox-style media galleries and carousels.
1 lines • 16.7 kB
JavaScript
var debug=void 0!==debug&&debug,mobile=void 0!==mobile&&mobile,getScriptDir=function(){var e=document.getElementsByTagName("script"),t=e[e.length-1].src.split("?")[0].split("/").slice(0,-1).join("/")+"/";return function(){return t}}();function createState(e,t,i){return{path:e,hash:t,title:i}}function getState(){var e=window.location.pathname,t=(window.location.search.slice(1),window.location.hash.substring(1)),i=document.title,o=createState(e,t,i);return debug&&(console.log("indexPath: "+e),console.log("hash: "+t),console.log("indexTitle: "+i)),o}function createPath(e,t){e.split("/").length;return e+t+"/"}function loadState(e){var t=e.path,i=e.title;debug&&(console.log("itemPath = "+t),console.log("itemTitle = "+i)),""!==t&&history.pushState("",i,t),document.title=i}function resetState(){document.location.hash="",history.pushState("",indexTitle,indexPath),document.title=indexTitle}function setScroll(e){var t=e.parent();e.hasClass("box-has-content")?(t.addClass("allow-scroll"),debug&&console.log("hello there")):t.removeClass("allow-scroll")}function setSlideBg(e,t){var i,o,s,n,l,a,d,r,c=e.is("img")?e:e.find("img"),u=!c.hasClass("bg-set")&&!c.hasClass("no-bg-load"),g=!1,v=new Image;return 0<c.length&&u&&(a=(n=c).data("src"),d=n.data("srcFull"),r=n.data("srcFullSl"),mobile&&void 0!==r?l=r:void 0!==d?l=d:t&&void 0!==a?l=a:n.hasClass("lazyload")||(l=n.attr("src")),i=l,o=(s=c).hasClass("slide")?s:s.parent(),void 0!==i&&(c.addClass("loading"),v.onload=(o.css("background-image","url("+i+")").addClass("has-bg"),c.removeClass("loading").addClass("bg-set"),g=!0,void(o.is("img")&&c.attr("src",slideBoxCm.imageDir+"blank.gif"))),v.src=i)),g}function loadSlideBgs(e){(e=void 0===e?$(".box-active"):e).find(".slide, .load-bg").each(function(){setSlideBg($(this))})}var slideBoxCm={initialized:!1,imageDir:"undefined"!=typeof imageDir?imageDir:getScriptDir()+"../images/"};function initSlides(e){if(slideBoxCm.initialized)debug&&console.log("initSlides: slideBox was already initialized.");else{var u,h="object"==typeof e?e:{container:".slide-box",slideBox:".slide-box",slide:".slide",slideBoxClick:!1,setPath:!1,wrapSlides:!1,loopSlides:!1,interval:5e3,debug:debug},C=$(h.slideBox),c=$(),n=$(".box-zoomed"),b=[],t=C.find(h.slide),d=getState(),g={prev:-1,next:1};h.debug&&console.log(h)}function i(){c=$(".box-active")}function l(e){e.addClass("box-active"),i(),loadSlideBgs()}function x(e){var t,i,o=void 0!==e?e:C.index(c),s=void 0!==o?C.eq(o):c,n=b[o],l=n.slides,a=n.slideCount-1,d=s.find(".slide-active"),r=0<d.length;n.pos=r?l.index(d):0,t=n.pos+g.prev,i=n.pos+g.next,n.prevSlide=0<=t?l.eq(t):l.eq(a),n.nextSlide=i<=a?l.eq(i):l.eq(0),1===n.slideCount&&(n.nextSlide=$(),n.prevSlide=$()),h.debug&&console.log("slideIndex after load {\n\tactive : \t"+n.pos+"\t\t #"+d.attr("id")+"\n\tprev : \t\t"+t+"\t\t #"+n.prevSlide.attr("id")+"\n\tnext : \t\t"+i+"\t\t #"+n.nextSlide.attr("id")+"\n}"),b[o]=n}function v(e){h.debug&&console.log("loadSlide : "+e.attr("id"));var t,i,o=e.closest(h.slideBox),s=C.index(o),n=b[s],l=e.attr("id"),a=createState(createPath(d.path,l),o.find(".list-item-title").text());n.slides.removeClass("playing"),$("#slide-copy").remove(),n.videos.trigger("pauseVideo"),e.hasClass("slide-active")?e.removeClass("slide-active"):(n.slides.removeClass("slide-active"),e.addClass("slide-active"),$(document).trigger("slideChanged"),x(s),h.setPath&&loadState(a),t=n.nextSlide.hasClass("slide-prev"),i=n.prevSlide.hasClass("slide-next"),n.slides.removeClass("slide-prev slide-next prev-to-next next-to-prev"),t?(n.nextSlide.clone().addClass("prev-out").attr("id","slide-copy").insertBefore(n.nextSlide),n.nextSlide.addClass("prev-to-next")):n.nextSlide.addClass("slide-next"),i?(n.prevSlide.clone().insertBefore(n.prevSlide).addClass("prev-out").attr("id","slide-copy"),n.prevSlide.addClass("next-to-prev")):n.prevSlide.addClass("slide-prev")),function(e){C.eq(e);var t=b[e],i=(t.controls.el,t.controls.prev),o=t.controls.next;t.pager.el,t.pager.a.removeClass("active pg-item-active").eq(t.pos).addClass("pg-item-active"),0===t.prevSlide.length?i.addClass("disabled"):i.removeClass("disabled"),0===t.nextSlide.length?o.addClass("disabled"):o.removeClass("disabled")}(s),setScroll(o)}function y(e,t){var c=void 0!==t?t:"";e.each(function(){var e,t,i,o,s=$(this),n=C.index(s),l=b[n],a=l.slides,d=(l.slideActive,s.hasClass("box-zoomed")||l.isCarousel),r=l.pos;h.debug&&console.log("\nboxIndex: "+n+", "+l.slideCount+" slides,\ndir : "+c+", allowChange: "+d),d&&(i=l.slideCount-1,o=""!==c?r+g[c]:a.index($slide),i<o&&(o=0),o<0&&(o=i),o!==r?(r=o,b[n].pos=r,t=a.eq(o)):t=!1,h.debug,(e=t)&&v(e))})}function o(e){var t,i,o=0<n.length;return"object"==typeof e?(e.preventDefault(),0<!(i=(t=$(e.target)).closest(h.slideBox)).length&&(i=t.closest(h.container).find(h.slideBox))):i=o?n:c,h.debug,i}function s(e){y(o(e),"prev")}function a(e){y(o(e),"next")}function r(e){C.eq(e).hasClass("box-zoomed")&&(b[e].controls.prev.removeClass("widget-hide"),b[e].controls.next.removeClass("widget-hide"),b[e].controls.close.removeClass("widget-hide"))}function f(e){var t,i,o,s;void 0!==e?($(document).trigger("zoomIn"),h.debug&&console.log("Zoom In"),t=e.closest(h.slideBox),i=C.index(t),o=b[i],l(t),t.addClass("box-zoomed"),n=t,o.slides.addClass("slide-detail"),$.scrollLock(!0),e.hasClass("slide-active")||v(e),r(i)):0<n.length&&(h.debug&&console.log("Zoom Out"),s=(t=n).find(".slide-active"),h.debug&&console.log("slideActive:"+s.attr("class")),$(document).trigger("zoomOut"),i=C.index(t),o=b[i],t.removeClass("box-zoomed"),n=$(),o.slides.removeClass("slide-detail"),o.isCarousel||o.slides.removeClass("slide-active slide-prev slide-next"),o.videos.trigger("pauseVideo"),$.scrollLock(!1),r(i),h.setPath&&loadState(d),$(document).trigger("zoomedOut"))}function m(e){var t=e.find(h.slide).eq(0);l(e),f(t)}!slideBoxCm.initialized&&0<C.length&&(!function(){var t,i,e=C.find("video"),o=C.find(".video-yt"),s=C.find(".video-vimeo"),n=(e.length,0<o.length),l=0<s.length,a={};function d(e){var t,i,o=$(e.target);i=(t=o).attr("id"),console.log("Pause video: "+i),t.is("video")?t.get(0).pause():t.hasClass("video-yt")?a[i].pauseVideo():t.hasClass("video-vimeo")&&a[i].pause()}function c(e){var t=e.attr("id");e.hasClass("video-yt")?(h.debug&&console.log("Adding YT Player "+t),a[t]=new YT.Player(t)):e.hasClass("video-vimeo")&&(h.debug&&console.log("Adding Vimeo Player "+t),a[t]=new Vimeo.Player(e.get(0))),e.on("pauseVideo",d)}function r(e){var t=e.target;setSlideBg($(t),!0)&&e.preventDefault()}e.on("pauseVideo",d),n&&(u=new Promise(function(e){window.onYouTubeIframeAPIReady=e,(t=document.createElement("script")).src="https://www.youtube.com/iframe_api",(i=document.getElementsByTagName("script")[0]).parentNode.insertBefore(t,i)})),l&&((t=document.createElement("script")).src="https://player.vimeo.com/api/player.js",(i=document.getElementsByTagName("script")[0]).parentNode.insertBefore(t,i)),C.each(function(){var e=$(this),t=e.closest(h.container),i=C.index(e),o=e.find(h.slide),s=e.find("video, .video-yt, .video-vimeo"),n=o.length,l=e.find(".slide-active"),a=0<l.length,d=e.data("carousel")||e.hasClass("box-carousel")||e.hasClass("slide-box-carousel"),r=e.data("loop")||e.hasClass("auto-loop")||t.hasClass("auto-loop"),c=e.data("interval")?e.data("interval"):h.interval,u=t.find(".controls"),g=u.find(".prev"),v=u.find(".next"),f=u.find(".close"),m=e.find(".pager"),p=m.find("a");a||(l=o.eq(0)),1===n&&v.addClass("disabled"),b[i]={slides:o,videos:s,slideCount:n,slideActive:0<l.length?l:o.eq(0),pos:0<l.length?o.index(l):0,isCarousel:d,controls:{el:u,prev:g,next:v,close:f},pager:{el:m,a:p}},d&&(x(i),l.addClass("slide-active"),b[i].prevSlide.addClass("slide-prev"),b[i].nextSlide.addClass("slide-next"),r&&1<n&&setInterval(function(){y(e,"next")},c))}),h.debug&&console.log(b),document.addEventListener("lazybeforeunveil",r),document.addEventListener("lazyloaded",r),(n||l)&&document.addEventListener("lazybeforeunveil",function(e){var t,i,o,s=e.target,n=$(s),l=(n.is("video"),n.hasClass("video-yt")),a=n.hasClass("video-vimeo"),d=n.closest(h.slideBox),r=C.index(d);b[r],(l||a)&&(t=s.cloneNode(!0),i=s.parentNode,t.src=s.getAttribute("data-src"),t.classList.remove("lazyload","lazyloading"),t.classList.add("lazyloaded"),i.insertBefore(t,s),s.remove(),o=$(t),b[r].videos=d.find("video, .video-yt, .video-vimeo"),l?u.then(function(e){c(o)}):c(o))})}(),C.on("slideBoxChange",function(e){var t=$(e.target);h.debug&&console.log("slideBoxChange event triggered"),l(t),x()}).on("prevSlide",s).on("nextSlide",a),t.on("toggleZoom",function(e){f($(e.target))}),$(document).on("slideChanged",function(){h.debug&&console.log("slideChanged event triggered")}),h.slideBoxClick?$(document).on("click",".slide-box:not(.box-zoomed)",function(e){h.debug&&console.log("\nslideBox clicked"),m($(this))}):$(document).on("click",".slide:not(a,.slide-detail,.slide.playing)",function(e){e.stopPropagation(),h.debug&&console.log("\nSlide clicked"),f($(this))}),$(document).on("click",".slide-detail:not(.slide.playing)",function(e){var t=$(this);t.parents(".slide-box"),t.data("archiveUrl"),e.stopPropagation(),h.debug&&console.log("\nDetail slide clicked:"+t),f()}).on("click",".controls .prev",s).on("click",".controls .next",a).on("swiperight",s).on("swipeleft",a).on("click",".controls .close",function(e){e.preventDefault(),f()}).on("click",".number, .pg-item",function(e){var t=$(this),i=t.closest(h.slideBox),o=C.index(i),s=b[o].slides,n=b[o].pager.a.index(t),l=s.eq(n);e.preventDefault(),h.debug&&console.log("item clicked "+parseInt(n+1)),l.hasClass("slide-active")||v(l)}).on("keyup",function(e){switch(e.keyCode){case 27:f();break;case 37:s();break;case 39:a()}}),i(),slideBoxCm.initialized=!0,h.debug&&console.log("initSlides: slideBox was initialized."))}$(function(){initSlides()}),$.scrollLock=function(){var e,t,i=!1;function o(){e||(e=$("body")),t=e.css("overflow"),e.css("overflow","hidden"),i=!0}function s(){e.css("overflow",t),i=!1}return function(e){arguments.length?e?o():s():i?s():o()}}(),function(e,t){var i=function(o,c){"use strict";if(!c.getElementsByClassName)return;var u,g,v=c.documentElement,n=o.Date,s=o.HTMLPictureElement,l="addEventListener",f="getAttribute",t=o[l],m=o.setTimeout,i=o.requestAnimationFrame||m,a=o.requestIdleCallback,p=/^picture$/i,d=["load","error","lazyincluded","_lazyloaded"],r={},h=Array.prototype.forEach,C=function(e,t){return r[t]||(r[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")),r[t].test(e[f]("class")||"")&&r[t]},b=function(e,t){C(e,t)||e.setAttribute("class",(e[f]("class")||"").trim()+" "+t)},x=function(e,t){var i;(i=C(e,t))&&e.setAttribute("class",(e[f]("class")||"").replace(i," "))},y=function(t,i,e){var o=e?l:"removeEventListener";e&&y(t,i),d.forEach(function(e){t[o](e,i)})},z=function(e,t,i,o,s){var n=c.createEvent("CustomEvent");return i||(i={}),i.instance=u,n.initCustomEvent(t,!o,!s,i),e.dispatchEvent(n),n},S=function(e,t){var i;!s&&(i=o.picturefill||g.pf)?i({reevaluate:!0,elements:[e]}):t&&t.src&&(e.src=t.src)},w=function(e,t){return(getComputedStyle(e,null)||{})[t]},$=function(e,t,i){for(i=i||e.offsetWidth;i<g.minSize&&t&&!e._lazysizesWidth;)i=t.offsetWidth,t=t.parentNode;return i},B=(P=[],N=[],T=P,D=function(){var e=T;for(T=P.length?N:P,k=!(E=!0);e.length;)e.shift()();E=!1},q=function(e,t){E&&!t?e.apply(this,arguments):(T.push(e),k||(k=!0,(c.hidden?m:i)(D)))},q._lsFlush=D,q),e=function(i,e){return e?function(){B(i)}:function(){var e=this,t=arguments;B(function(){i.apply(e,t)})}},A=function(e){var t,i,o=function(){t=null,e()},s=function(){var e=n.now()-i;e<99?m(s,99-e):(a||o)(o)};return function(){i=n.now(),t||(t=m(s,99))}};var E,k,P,N,T,D,q;!function(){var e,t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};for(e in g=o.lazySizesConfig||o.lazysizesConfig||{},t)e in g||(g[e]=t[e]);o.lazySizesConfig=g,m(function(){g.init&&_()})}();var L=(re=/^img$/i,ce=/^iframe$/i,ue="onscroll"in o&&!/glebot/.test(navigator.userAgent),ge=0,ve=0,fe=-1,me=function(e){ve--,e&&e.target&&y(e.target,me),(!e||ve<0||!e.target)&&(ve=0)},pe=function(e,t){var i,o=e,s="hidden"==w(c.body,"visibility")||"hidden"!=w(e,"visibility");for(G-=t,Q+=t,J-=t,K+=t;s&&(o=o.offsetParent)&&o!=c.body&&o!=v;)(s=0<(w(o,"opacity")||1))&&"visible"!=w(o,"overflow")&&(i=o.getBoundingClientRect(),s=K>i.left&&J<i.right&&Q>i.top-1&&G<i.bottom+1);return s},he=function(){var e,t,i,o,s,n,l,a,d,r=u.elements;if((H=g.loadMode)&&ve<8&&(e=r.length)){t=0,fe++,null==ee&&("expand"in g||(g.expand=500<v.clientHeight&&500<v.clientWidth?500:370),X=g.expand,ee=X*g.expFactor),ge<ee&&ve<1&&2<fe&&2<H&&!c.hidden?(ge=ee,fe=0):ge=1<H&&1<fe&&ve<6?X:0;for(;t<e;t++)if(r[t]&&!r[t]._lazyRace)if(ue)if((a=r[t][f]("data-expand"))&&(n=1*a)||(n=ge),d!==n&&(Z=innerWidth+n*te,U=innerHeight+n,l=-1*n,d=n),i=r[t].getBoundingClientRect(),(Q=i.bottom)>=l&&(G=i.top)<=U&&(K=i.right)>=l*te&&(J=i.left)<=Z&&(Q||K||J||G)&&(g.loadHidden||"hidden"!=w(r[t],"visibility"))&&(V&&ve<3&&!a&&(H<3||fe<4)||pe(r[t],n))){if(we(r[t]),s=!0,9<ve)break}else!s&&V&&!o&&ve<4&&fe<4&&2<H&&(R[0]||g.preloadAfterLoad)&&(R[0]||!a&&(Q||K||J||G||"auto"!=r[t][f](g.sizesAttr)))&&(o=R[0]||r[t]);else we(r[t]);o&&!s&&we(o)}},ie=he,se=0,ne=g.throttleDelay,le=g.ricTimeout,ae=function(){oe=!1,se=n.now(),ie()},de=a&&49<le?function(){a(ae,{timeout:le}),le!==g.ricTimeout&&(le=g.ricTimeout)}:e(function(){m(ae)},!0),Ce=function(e){var t;(e=!0===e)&&(le=33),oe||(oe=!0,(t=ne-(n.now()-se))<0&&(t=0),e||t<9?de():m(de,t))},be=function(e){b(e.target,g.loadedClass),x(e.target,g.loadingClass),y(e.target,ye),z(e.target,"lazyloaded")},xe=e(be),ye=function(e){xe({target:e.target})},ze=function(e){var t,i=e[f](g.srcsetAttr);(t=g.customMedia[e[f]("data-media")||e[f]("media")])&&e.setAttribute("media",t),i&&e.setAttribute("srcset",i)},Se=e(function(e,t,i,o,s){var n,l,a,d,r,c;(r=z(e,"lazybeforeunveil",t)).defaultPrevented||(o&&(i?b(e,g.autosizesClass):e.setAttribute("sizes",o)),l=e[f](g.srcsetAttr),n=e[f](g.srcAttr),s&&(a=e.parentNode,d=a&&p.test(a.nodeName||"")),c=t.firesLoad||"src"in e&&(l||n||d),r={target:e},c&&(y(e,me,!0),clearTimeout(j),j=m(me,2500),b(e,g.loadingClass),y(e,ye,!0)),d&&h.call(a.getElementsByTagName("source"),ze),l?e.setAttribute("srcset",l):n&&!d&&(ce.test(e.nodeName)?function(t,i){try{t.contentWindow.location.replace(i)}catch(e){t.src=i}}(e,n):e.src=n),s&&(l||d)&&S(e,{src:n})),e._lazyRace&&delete e._lazyRace,x(e,g.lazyClass),B(function(){(!c||e.complete&&1<e.naturalWidth)&&(c?me(r):ve--,be(r))},!0)}),we=function(e){var t,i=re.test(e.nodeName),o=i&&(e[f](g.sizesAttr)||e[f]("sizes")),s="auto"==o;(!s&&V||!i||!e[f]("src")&&!e.srcset||e.complete||C(e,g.errorClass)||!C(e,g.lazyClass))&&(t=z(e,"lazyunveilread").detail,s&&M.updateElem(e,!0,e.offsetWidth),e._lazyRace=!0,ve++,Se(e,t,s,o,i))},$e=function(){if(!V)if(n.now()-Y<999)m($e,999);else{var e=A(function(){g.loadMode=3,Ce()});V=!0,g.loadMode=3,Ce(),t("scroll",function(){3==g.loadMode&&(g.loadMode=2),e()},!0)}},{_:function(){Y=n.now(),u.elements=c.getElementsByClassName(g.lazyClass),R=c.getElementsByClassName(g.lazyClass+" "+g.preloadClass),te=g.hFac,t("scroll",Ce,!0),t("resize",Ce,!0),o.MutationObserver?new MutationObserver(Ce).observe(v,{childList:!0,subtree:!0,attributes:!0}):(v[l]("DOMNodeInserted",Ce,!0),v[l]("DOMAttrModified",Ce,!0),setInterval(Ce,999)),t("hashchange",Ce,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(e){c[l](e,Ce,!0)}),/d$|^c/.test(c.readyState)?$e():(t("load",$e),c[l]("DOMContentLoaded",Ce),m($e,2e4)),u.elements.length?(he(),B._lsFlush()):Ce()},checkElems:Ce,unveil:we}),M=(W=e(function(e,t,i,o){var s,n,l;if(e._lazysizesWidth=o,o+="px",e.setAttribute("sizes",o),p.test(t.nodeName||""))for(s=t.getElementsByTagName("source"),n=0,l=s.length;n<l;n++)s[n].setAttribute("sizes",o);i.detail.dataAttr||S(e,i.detail)}),F=function(e,t,i){var o,s=e.parentNode;s&&(i=$(e,s,i),(o=z(e,"lazybeforesizes",{width:i,dataAttr:!!t})).defaultPrevented||(i=o.detail.width)&&i!==e._lazysizesWidth&&W(e,s,o,i))},O=A(function(){var e,t=I.length;if(t)for(e=0;e<t;e++)F(I[e])}),{_:function(){I=c.getElementsByClassName(g.autosizesClass),t("resize",O)},checkElems:O,updateElem:F}),_=function(){_.i||(_.i=!0,M._(),L._())};var I,W,F,O;var R,V,j,H,Y,Z,U,G,J,K,Q,X,ee,te,ie,oe,se,ne,le,ae,de,re,ce,ue,ge,ve,fe,me,pe,he,Ce,be,xe,ye,ze,Se,we,$e;return u={cfg:g,autoSizer:M,loader:L,init:_,uP:S,aC:b,rC:x,hC:C,fire:z,gW:$,rAF:B}}(e,e.document);e.lazySizes=i,"object"==typeof module&&module.exports&&(module.exports=i)}(window);