11 lines
3.7 KiB
JavaScript
Executable File
11 lines
3.7 KiB
JavaScript
Executable File
// Fluidbox
|
|
// Description: Replicating the seamless lightbox transition effect seen on Medium.com, with some improvements
|
|
// Version: 1.2.1
|
|
// Author: Terry Mun
|
|
// Author URI: http://terrymun.com
|
|
|
|
// Paul Irish's debounced resize event
|
|
!function(a,b){var c=function(a,b,c){var d;return function(){function g(){c||a.apply(e,f),d=null}var e=this,f=arguments;d?clearTimeout(d):c&&a.apply(e,f),d=setTimeout(g,b||100)}};jQuery.fn[b]=function(a){return a?this.bind("resize",c(a)):this.trigger(b)}}(jQuery,"smartresize");
|
|
|
|
// Fluidbox plugin
|
|
!function(a){a.fn.fluidbox=function(b){var c=a.extend(!0,{viewportFill:.95,overlayColor:"rgba(255,255,255,.85)",debounceResize:!0,closeTrigger:[{selector:"#fluidbox-overlay",event:"click"},{selector:"document",event:"keyup",keyCode:27}]},b);$fbOverlay=a("<div />",{id:"fluidbox-overlay",css:{"background-color":c.overlayColor}});var f,d=this,e=a(window),g=function(){a(".fluidbox-opened").trigger("click")},h=function(a){var b=a.find("img"),c=a.find(".fluidbox-ghost"),d=e.scrollTop()-b.offset().top+.5*b.data("imgHeight")*(b.data("imgScale")-1)+.5*(e.height()-b.data("imgHeight")*b.data("imgScale")),f=.5*b.data("imgWidth")*(b.data("imgScale")-1)+.5*(e.width()-b.data("imgWidth")*b.data("imgScale"))-b.offset().left,g=b.data("imgScale");c.css({transform:"translate("+parseInt(10*f)/10+"px,"+parseInt(10*d)/10+"px) scale("+parseInt(1e3*g)/1e3+")"})},i=function(){f=e.width()/e.height(),d.each(function(){if(a(this).hasClass("fluidbox")){var b=a(this).find("img"),d=a(this).find(".fluidbox-ghost"),g=a(this).find(".fluidbox-wrap"),h=b.data();h.imgWidth=b.width(),h.imgHeight=b.height(),h.imgRatio=b.width()/b.height(),d.css({width:b.width(),height:b.height(),top:b.offset().top-g.offset().top,left:b.offset().left-g.offset().left}),h.imgScale=f>h.imgRatio?e.height()*c.viewportFill/b.height():e.width()*c.viewportFill/b.width()}})};return c.closeTrigger&&a.each(c.closeTrigger,function(b){var d=c.closeTrigger[b];"window"!=d.selector?"document"==d.selector?d.keyCode?a(document).on(d.event,function(a){a.keyCode==d.keyCode&&g()}):a(document).on(d.event,g):a(document).on(d.event,c.closeTrigger[b].selector,g):e.on(d.event,g)}),d.imagesLoaded().done(function(){d.each(function(){a(this).is("a")&&1===a(this).children().length&&a(this).children().is("img")&&a(this).addClass("fluidbox").wrapInner('<div class="fluidbox-wrap" />').find("img").css({opacity:1}).after('<div class="fluidbox-ghost" />')}),i();var b=function(){i();var b=a("a[data-fluidbox].fluidbox-opened");b.length>0&&h(b)};c.debounceResize?a(window).smartresize(b):a(window).resize(b),d.click(function(b){if(a(this).hasClass("fluidbox")){var c=a(this),d=a(this).find("img"),e=a(this).find(".fluidbox-ghost");if(0!==a(this).data("fluidbox-state")&&a(this).data("fluidbox-state"))a(this).data("fluidbox-state",0).removeClass("fluidbox-opened").addClass("fluidbox-closed"),a("#fluidbox-overlay").css({opacity:0}).one("webkitTransitionEnd MSTransitionEnd oTransitionEnd otransitionend transitionend",function(b){"opacity"==b.originalEvent.propertyName&&a(this).remove()}),d.one("webkitTransitionEnd MSTransitionEnd oTransitionEnd otransitionend transitionend",function(a){"opacity"==a.originalEvent.propertyName&&e.css({opacity:0})}),e.css({transform:"translate(0,0) scale(1)"}).one("webkitTransitionEnd MSTransitionEnd oTransitionEnd otransitionend transitionend",function(a){"opacity"==a.originalEvent.propertyName&&d.css({opacity:1})});else{a(this).append($fbOverlay).data("fluidbox-state",1).removeClass("fluidbox-closed").addClass("fluidbox-opened"),a("#fluidbox-overlay").css({opacity:1}),e.css({"background-image":"url("+d.attr("src")+")",opacity:1}),d.css({opacity:0});var f=new Image;f.onload=function(){e.css({"background-image":"url("+c.attr("href")+")"})},f.src=a(this).attr("href"),h(a(this))}b.preventDefault()}})}),d}}(jQuery); |