UNPKG

slidebox-js

Version:

A jQuery plugin for easy creation of responsive lightbox-style media galleries and carousels.

1 lines 10 kB
var debug=void 0!==debug&&debug,mobile=void 0!==mobile&&mobile,getScriptDir=function(){var e=document.getElementsByTagName("script"),i=e[e.length-1].src.split("?")[0].split("/").slice(0,-1).join("/")+"/";return function(){return i}}();function createState(e,i,o){return{path:e,hash:i,title:o}}function getState(){var e=window.location.pathname,i=(window.location.search.slice(1),window.location.hash.substring(1)),o=document.title,t=createState(e,i,o);return debug&&(console.log("indexPath: "+e),console.log("hash: "+i),console.log("indexTitle: "+o)),t}function createPath(e,i){e.split("/").length;return e+i+"/"}function loadState(e){var i=e.path,o=e.title;debug&&(console.log("itemPath = "+i),console.log("itemTitle = "+o)),""!==i&&history.pushState("",o,i),document.title=o}function resetState(){document.location.hash="",history.pushState("",indexTitle,indexPath),document.title=indexTitle}function setScroll(e){var i=e.parent();e.hasClass("box-has-content")?(i.addClass("allow-scroll"),debug&&console.log("hello there")):i.removeClass("allow-scroll")}function setSlideBg(e,i){var o,t,s,l,d,n,a,r,c=e.is("img")?e:e.find("img"),g=!c.hasClass("bg-set")&&!c.hasClass("no-bg-load"),v=!1,u=new Image;return 0<c.length&&g&&(n=(l=c).data("src"),a=l.data("srcFull"),r=l.data("srcFullSl"),mobile&&void 0!==r?d=r:void 0!==a?d=a:i&&void 0!==n?d=n:l.hasClass("lazyload")||(d=l.attr("src")),o=d,t=(s=c).hasClass("slide")?s:s.parent(),void 0!==o&&(c.addClass("loading"),u.onload=(t.css("background-image","url("+o+")").addClass("has-bg"),c.removeClass("loading").addClass("bg-set"),v=!0,void(t.is("img")&&c.attr("src",slideBoxCm.imageDir+"blank.gif"))),u.src=o)),v}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 g,f="object"==typeof e?e:{container:".slide-box",slideBox:".slide-box",slide:".slide",slideBoxClick:!1,setPath:!1,wrapSlides:!1,loopSlides:!1,interval:5e3,debug:debug},x=$(f.slideBox),c=$(),l=$(".box-zoomed"),C=[],i=x.find(f.slide),a=getState(),v={prev:-1,next:1};f.debug&&console.log(f)}function o(){c=$(".box-active")}function d(e){e.addClass("box-active"),o(),loadSlideBgs()}function b(e){var i,o,t=void 0!==e?e:x.index(c),s=void 0!==t?x.eq(t):c,l=C[t],d=l.slides,n=l.slideCount-1,a=s.find(".slide-active"),r=0<a.length;l.pos=r?d.index(a):0,i=l.pos+v.prev,o=l.pos+v.next,l.prevSlide=0<=i?d.eq(i):d.eq(n),l.nextSlide=o<=n?d.eq(o):d.eq(0),1===l.slideCount&&(l.nextSlide=$(),l.prevSlide=$()),f.debug&&console.log("slideIndex after load {\n\tactive : \t"+l.pos+"\t\t #"+a.attr("id")+"\n\tprev : \t\t"+i+"\t\t #"+l.prevSlide.attr("id")+"\n\tnext : \t\t"+o+"\t\t #"+l.nextSlide.attr("id")+"\n}"),C[t]=l}function u(e){f.debug&&console.log("loadSlide : "+e.attr("id"));var i,o,t=e.closest(f.slideBox),s=x.index(t),l=C[s],d=e.attr("id"),n=createState(createPath(a.path,d),t.find(".list-item-title").text());l.slides.removeClass("playing"),$("#slide-copy").remove(),l.videos.trigger("pauseVideo"),e.hasClass("slide-active")?e.removeClass("slide-active"):(l.slides.removeClass("slide-active"),e.addClass("slide-active"),$(document).trigger("slideChanged"),b(s),f.setPath&&loadState(n),i=l.nextSlide.hasClass("slide-prev"),o=l.prevSlide.hasClass("slide-next"),l.slides.removeClass("slide-prev slide-next prev-to-next next-to-prev"),i?(l.nextSlide.clone().addClass("prev-out").attr("id","slide-copy").insertBefore(l.nextSlide),l.nextSlide.addClass("prev-to-next")):l.nextSlide.addClass("slide-next"),o?(l.prevSlide.clone().insertBefore(l.prevSlide).addClass("prev-out").attr("id","slide-copy"),l.prevSlide.addClass("next-to-prev")):l.prevSlide.addClass("slide-prev")),function(e){x.eq(e);var i=C[e],o=(i.controls.el,i.controls.prev),t=i.controls.next;i.pager.el,i.pager.a.removeClass("active pg-item-active").eq(i.pos).addClass("pg-item-active"),0===i.prevSlide.length?o.addClass("disabled"):o.removeClass("disabled"),0===i.nextSlide.length?t.addClass("disabled"):t.removeClass("disabled")}(s),setScroll(t)}function S(e,i){var c=void 0!==i?i:"";e.each(function(){var e,i,o,t,s=$(this),l=x.index(s),d=C[l],n=d.slides,a=(d.slideActive,s.hasClass("box-zoomed")||d.isCarousel),r=d.pos;f.debug&&console.log("\nboxIndex: "+l+", "+d.slideCount+" slides,\ndir : "+c+", allowChange: "+a),a&&(o=d.slideCount-1,t=""!==c?r+v[c]:n.index($slide),o<t&&(t=0),t<0&&(t=o),t!==r?(r=t,C[l].pos=r,i=n.eq(t)):i=!1,f.debug,(e=i)&&u(e))})}function t(e){var i,o,t=0<l.length;return"object"==typeof e?(e.preventDefault(),0<!(o=(i=$(e.target)).closest(f.slideBox)).length&&(o=i.closest(f.container).find(f.slideBox))):o=t?l:c,f.debug,o}function s(e){S(t(e),"prev")}function n(e){S(t(e),"next")}function r(e){x.eq(e).hasClass("box-zoomed")&&(C[e].controls.prev.removeClass("widget-hide"),C[e].controls.next.removeClass("widget-hide"),C[e].controls.close.removeClass("widget-hide"))}function p(e){var i,o,t,s;void 0!==e?($(document).trigger("zoomIn"),f.debug&&console.log("Zoom In"),i=e.closest(f.slideBox),o=x.index(i),t=C[o],d(i),i.addClass("box-zoomed"),l=i,t.slides.addClass("slide-detail"),$.scrollLock(!0),e.hasClass("slide-active")||u(e),r(o)):0<l.length&&(f.debug&&console.log("Zoom Out"),s=(i=l).find(".slide-active"),f.debug&&console.log("slideActive:"+s.attr("class")),$(document).trigger("zoomOut"),o=x.index(i),t=C[o],i.removeClass("box-zoomed"),l=$(),t.slides.removeClass("slide-detail"),t.isCarousel||t.slides.removeClass("slide-active slide-prev slide-next"),t.videos.trigger("pauseVideo"),$.scrollLock(!1),r(o),f.setPath&&loadState(a),$(document).trigger("zoomedOut"))}function m(e){var i=e.find(f.slide).eq(0);d(e),p(i)}!slideBoxCm.initialized&&0<x.length&&(!function(){var i,o,e=x.find("video"),t=x.find(".video-yt"),s=x.find(".video-vimeo"),l=(e.length,0<t.length),d=0<s.length,n={};function a(e){var i,o,t=$(e.target);o=(i=t).attr("id"),console.log("Pause video: "+o),i.is("video")?i.get(0).pause():i.hasClass("video-yt")?n[o].pauseVideo():i.hasClass("video-vimeo")&&n[o].pause()}function c(e){var i=e.attr("id");e.hasClass("video-yt")?(f.debug&&console.log("Adding YT Player "+i),n[i]=new YT.Player(i)):e.hasClass("video-vimeo")&&(f.debug&&console.log("Adding Vimeo Player "+i),n[i]=new Vimeo.Player(e.get(0))),e.on("pauseVideo",a)}function r(e){var i=e.target;setSlideBg($(i),!0)&&e.preventDefault()}e.on("pauseVideo",a),l&&(g=new Promise(function(e){window.onYouTubeIframeAPIReady=e,(i=document.createElement("script")).src="https://www.youtube.com/iframe_api",(o=document.getElementsByTagName("script")[0]).parentNode.insertBefore(i,o)})),d&&((i=document.createElement("script")).src="https://player.vimeo.com/api/player.js",(o=document.getElementsByTagName("script")[0]).parentNode.insertBefore(i,o)),x.each(function(){var e=$(this),i=e.closest(f.container),o=x.index(e),t=e.find(f.slide),s=e.find("video, .video-yt, .video-vimeo"),l=t.length,d=e.find(".slide-active"),n=0<d.length,a=e.data("carousel")||e.hasClass("box-carousel")||e.hasClass("slide-box-carousel"),r=e.data("loop")||e.hasClass("auto-loop")||i.hasClass("auto-loop"),c=e.data("interval")?e.data("interval"):f.interval,g=i.find(".controls"),v=g.find(".prev"),u=g.find(".next"),p=g.find(".close"),m=e.find(".pager"),h=m.find("a");n||(d=t.eq(0)),1===l&&u.addClass("disabled"),C[o]={slides:t,videos:s,slideCount:l,slideActive:0<d.length?d:t.eq(0),pos:0<d.length?t.index(d):0,isCarousel:a,controls:{el:g,prev:v,next:u,close:p},pager:{el:m,a:h}},a&&(b(o),d.addClass("slide-active"),C[o].prevSlide.addClass("slide-prev"),C[o].nextSlide.addClass("slide-next"),r&&1<l&&setInterval(function(){S(e,"next")},c))}),f.debug&&console.log(C),document.addEventListener("lazybeforeunveil",r),document.addEventListener("lazyloaded",r),(l||d)&&document.addEventListener("lazybeforeunveil",function(e){var i,o,t,s=e.target,l=$(s),d=(l.is("video"),l.hasClass("video-yt")),n=l.hasClass("video-vimeo"),a=l.closest(f.slideBox),r=x.index(a);C[r],(d||n)&&(i=s.cloneNode(!0),o=s.parentNode,i.src=s.getAttribute("data-src"),i.classList.remove("lazyload","lazyloading"),i.classList.add("lazyloaded"),o.insertBefore(i,s),s.remove(),t=$(i),C[r].videos=a.find("video, .video-yt, .video-vimeo"),d?g.then(function(e){c(t)}):c(t))})}(),x.on("slideBoxChange",function(e){var i=$(e.target);f.debug&&console.log("slideBoxChange event triggered"),d(i),b()}).on("prevSlide",s).on("nextSlide",n),i.on("toggleZoom",function(e){p($(e.target))}),$(document).on("slideChanged",function(){f.debug&&console.log("slideChanged event triggered")}),f.slideBoxClick?$(document).on("click",".slide-box:not(.box-zoomed)",function(e){f.debug&&console.log("\nslideBox clicked"),m($(this))}):$(document).on("click",".slide:not(a,.slide-detail,.slide.playing)",function(e){e.stopPropagation(),f.debug&&console.log("\nSlide clicked"),p($(this))}),$(document).on("click",".slide-detail:not(.slide.playing)",function(e){var i=$(this);i.parents(".slide-box"),i.data("archiveUrl"),e.stopPropagation(),f.debug&&console.log("\nDetail slide clicked:"+i),p()}).on("click",".controls .prev",s).on("click",".controls .next",n).on("swiperight",s).on("swipeleft",n).on("click",".controls .close",function(e){e.preventDefault(),p()}).on("click",".number, .pg-item",function(e){var i=$(this),o=i.closest(f.slideBox),t=x.index(o),s=C[t].slides,l=C[t].pager.a.index(i),d=s.eq(l);e.preventDefault(),f.debug&&console.log("item clicked "+parseInt(l+1)),d.hasClass("slide-active")||u(d)}).on("keyup",function(e){switch(e.keyCode){case 27:p();break;case 37:s();break;case 39:n()}}),o(),slideBoxCm.initialized=!0,f.debug&&console.log("initSlides: slideBox was initialized."))}$(function(){initSlides()}),$.scrollLock=function(){var e,i,o=!1;function t(){e||(e=$("body")),i=e.css("overflow"),e.css("overflow","hidden"),o=!0}function s(){e.css("overflow",i),o=!1}return function(e){arguments.length?e?t():s():o?s():t()}}();