bonny,
шифровка из центра ...
указать в data-src ссылку на оригинал (по желанию)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.materialboxed {
width: 300px; border: 1px solid #000000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<link href="http://materializecss.com/css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
<script>
(function(b){b.fn.materialbox=function(){return this.each(function(){function t(){var a=c.src;c.src=c.dataset.src;c.dataset.src=a}function n(){f=!1;var e=a.parent(".material-placeholder"),c=a.data("width"),g=a.data("height");a.velocity("stop",!0);b("#materialbox-overlay").velocity("stop",!0);b(".materialbox-caption").velocity("stop",!0);b(window).off("scroll.materialbox");b(document).off("keyup.materialbox");b(window).off("resize.materialbox");b("#materialbox-overlay").velocity({opacity:0},{duration:200,
queue:!1,easing:"easeOutQuad",complete:function(){h=!1;b(this).remove()}});a.velocity({width:c,height:g,left:0,top:0},{duration:200,queue:!1,easing:"easeOutQuad",complete:function(){t();e.css({height:"",width:"",position:"",top:"",left:""});a.removeAttr("style");a.attr("style",u);a.removeClass("active");f=!0;p&&p.css("overflow","")}});b(".materialbox-caption").velocity({opacity:0},{duration:200,queue:!1,easing:"easeOutQuad",complete:function(){b(this).remove()}})}if(!b(this).hasClass("initialized")){b(this).addClass("initialized");
var h=!1,f=!0,a=b(this),k=b("<div></div>").addClass("material-placeholder"),p,q,u=a.attr("style");a.wrap(k);var c=this,l=new Image;k=c.dataset.src;c.dataset.src||(k=c.dataset.src=c.src);l.src=k;a.on("click",function(){!h&&t();var e=a.parent(".material-placeholder"),c=window.innerWidth,g=window.innerHeight,k=a.width(),d=a.height();if(!1===f||h&&!0===f)return n(),!1;f=!1;a.addClass("active");h=!0;e.css({width:e[0].getBoundingClientRect().width,height:e[0].getBoundingClientRect().height,position:"relative",
top:0,left:0});p=void 0;for(q=e[0].parentNode;null!==q&&!b(q).is(document);)e=b(q),"visible"!==e.css("overflow")&&(e.css("overflow","visible"),p=void 0===p?e:p.add(e)),q=q.parentNode;a.css({position:"absolute","z-index":1E3,"will-change":"left, top, width, height"}).data("width",k).data("height",d);d=b('<div id="materialbox-overlay"></div>').css({opacity:0}).click(function(){!0===f&&n()});a.before(d);e=d[0].getBoundingClientRect();d.css({width:c,height:g,left:-1*e.left,top:-1*e.top});d.velocity({opacity:1},
{duration:275,queue:!1,easing:"easeOutQuad"});""!==a.data("caption")&&(d=b('<div class="materialbox-caption"></div>'),d.text(a.data("caption")),b("body").append(d),d.css({display:"inline"}),d.velocity({opacity:1},{duration:275,queue:!1,easing:"easeOutQuad"}));var m=d=0,r=0;l.width/c>l.height/g?(d=l.height/l.width,m=.9*c,r=.9*c*d):(d=l.width/l.height,m=.9*g*d,r=.9*g);a.hasClass("responsive-img")?a.velocity({"max-width":m,width:k},{duration:0,queue:!1,complete:function(){a.css({left:0,top:0}).velocity({height:r,
width:m,left:b(document).scrollLeft()+c/2-a.parent(".material-placeholder").offset().left-m/2,top:b(document).scrollTop()+g/2-a.parent(".material-placeholder").offset().top-r/2},{duration:275,queue:!1,easing:"easeOutQuad",complete:function(){f=!0}})}}):a.css("left",0).css("top",0).velocity({height:r,width:m,left:b(document).scrollLeft()+c/2-a.parent(".material-placeholder").offset().left-m/2,top:b(document).scrollTop()+g/2-a.parent(".material-placeholder").offset().top-r/2},{duration:275,queue:!1,
easing:"easeOutQuad",complete:function(){f=!0}});b(window).on("scroll.materialbox",function(){h&&n()});b(window).on("resize.materialbox",function(){h&&n()});b(document).on("keyup.materialbox",function(a){27===a.keyCode&&!0===f&&h&&n()})})}})}})(jQuery);
$(function() {
$('.materialboxed').materialbox();
});
</script>
</head>
<body>
<img class="materialboxed" data-caption="описание" src="https://www.walldevil.com/wallpapers/h15/thumb/woman-christmas.jpg" />
<img class="materialboxed" data-caption="описание" src="https://www.walldevil.com/wallpapers/h15/thumb/woman-christmas.jpg" data-src="http://333v.ru/uploads/fa/fae6f29aed9669e7bf9fac48febfc3e1.jpg"/>
<img class="materialboxed" data-caption="описание" src="https://www.walldevil.com/wallpapers/h15/thumb/woman-christmas.jpg" data-src="http://333v.ru/uploads/fa/fae6f29aed9669e7bf9fac48febfc3e1.jpg"/>
</body>
</html>