Оригинал картинки в полноэкранном режиме
Есть скрипт matrialbox от команды materializecss, который на полный экран открывает картинку, но разработчики в превью и оригинал вместе не смогли. Искал решения, вроде что-то есть, но она не работает почему-то.
Может кто-то придумает обходное решение, чтобы на странице отображалось превью, а при открытии оригинал. Костыль что ли какой-нибудь. Или вообще кто-то умеет и сможет переделать отображение оригинала в полноэкранном режиме, который брал бы из в параметра data-original, например.:help: <img class="materialboxed" data-caption="описание" src="источник"/> Ставить его в тег ссылки нельзя. Он так не работает. (function ($) { $.fn.materialbox = function () { return this.each(function() { if ($(this).hasClass('initialized')) { return; } $(this).addClass('initialized'); var overlayActive = false; var doneAnimating = true; var inDuration = 275; var outDuration = 200; var origin = $(this); var placeholder = $('<div></div>').addClass('material-placeholder'); var originalWidth = 0; var originalHeight = 0; var ancestorsChanged; var ancestor; var originInlineStyles = origin.attr('style'); origin.wrap(placeholder); // Start click handler origin.on('click', function() { var placeholder = origin.parent('.material-placeholder'); var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; var originalWidth = origin.width(); var originalHeight = origin.height(); // If already modal, return to original if (doneAnimating === false) { returnToOriginal(); return false; } else if (overlayActive && doneAnimating===true) { returnToOriginal(); return false; } // Set states doneAnimating = false; origin.addClass('active'); overlayActive = true; // Set positioning for placeholder placeholder.css({ width: placeholder[0].getBoundingClientRect().width, height: placeholder[0].getBoundingClientRect().height, position: 'relative', top: 0, left: 0 }); // Find ancestor with overflow: hidden; and remove it ancestorsChanged = undefined; ancestor = placeholder[0].parentNode; var count = 0; while (ancestor !== null && !$(ancestor).is(document)) { var curr = $(ancestor); if (curr.css('overflow') !== 'visible') { curr.css('overflow', 'visible'); if (ancestorsChanged === undefined) { ancestorsChanged = curr; } else { ancestorsChanged = ancestorsChanged.add(curr); } } ancestor = ancestor.parentNode; } // Set css on origin origin.css({ position: 'absolute', 'z-index': 1000, 'will-change': 'left, top, width, height' }) .data('width', originalWidth) .data('height', originalHeight); // Add overlay var overlay = $('<div id="materialbox-overlay"></div>') .css({ opacity: 0 }) .click(function(){ if (doneAnimating === true) returnToOriginal(); }); // Put before in origin image to preserve z-index layering. origin.before(overlay); // Set dimensions if needed var overlayOffset = overlay[0].getBoundingClientRect(); overlay.css({ width: windowWidth, height: windowHeight, left: -1 * overlayOffset.left, top: -1 * overlayOffset.top }) // Animate Overlay overlay.velocity({opacity: 1}, {duration: inDuration, queue: false, easing: 'easeOutQuad'} ); // Add and animate caption if it exists if (origin.data('caption') !== "") { var $photo_caption = $('<div class="materialbox-caption"></div>'); $photo_caption.text(origin.data('caption')); $('body').append($photo_caption); $photo_caption.css({ "display": "inline" }); $photo_caption.velocity({opacity: 1}, {duration: inDuration, queue: false, easing: 'easeOutQuad'}); } // Resize Image var ratio = 0; var widthPercent = originalWidth / windowWidth; var heightPercent = originalHeight / windowHeight; var newWidth = 0; var newHeight = 0; if (widthPercent > heightPercent) { ratio = originalHeight / originalWidth; newWidth = windowWidth * 0.9; newHeight = windowWidth * 0.9 * ratio; } else { ratio = originalWidth / originalHeight; newWidth = (windowHeight * 0.9) * ratio; newHeight = windowHeight * 0.9; } // Animate image + set z-index if(origin.hasClass('responsive-img')) { origin.velocity({'max-width': newWidth, 'width': originalWidth}, {duration: 0, queue: false, complete: function(){ origin.css({left: 0, top: 0}) .velocity( { height: newHeight, width: newWidth, left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2, top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2 }, { duration: inDuration, queue: false, easing: 'easeOutQuad', complete: function(){doneAnimating = true;} } ); } // End Complete }); // End Velocity } else { origin.css('left', 0) .css('top', 0) .velocity( { height: newHeight, width: newWidth, left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2, top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2 }, { duration: inDuration, queue: false, easing: 'easeOutQuad', complete: function(){doneAnimating = true;} } ); // End Velocity } // Handle Exit triggers $(window).on('scroll.materialbox', function() { if (overlayActive) { returnToOriginal(); } }); $(window).on('resize.materialbox', function() { if (overlayActive) { returnToOriginal(); } }); $(document).on('keyup.materialbox', function(e) { // ESC key if (e.keyCode === 27 && doneAnimating === true && overlayActive) { returnToOriginal(); } }); }); // End click handler // This function returns the modaled image to the original spot function returnToOriginal() { doneAnimating = false; var placeholder = origin.parent('.material-placeholder'); var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; var originalWidth = origin.data('width'); var originalHeight = origin.data('height'); origin.velocity("stop", true); $('#materialbox-overlay').velocity("stop", true); $('.materialbox-caption').velocity("stop", true); // disable exit handlers $(window).off('scroll.materialbox'); $(document).off('keyup.materialbox'); $(window).off('resize.materialbox'); $('#materialbox-overlay').velocity({opacity: 0}, { duration: outDuration, // Delay prevents animation overlapping queue: false, easing: 'easeOutQuad', complete: function(){ // Remove Overlay overlayActive = false; $(this).remove(); } }); // Resize Image origin.velocity( { width: originalWidth, height: originalHeight, left: 0, top: 0 }, { duration: outDuration, queue: false, easing: 'easeOutQuad', complete: function() { placeholder.css({ height: '', width: '', position: '', top: '', left: '' }); origin.removeAttr('style'); origin.attr('style', originInlineStyles); // Remove class origin.removeClass('active'); doneAnimating = true; // Remove overflow overrides on ancestors if (ancestorsChanged) { ancestorsChanged.css('overflow', ''); } } } ); // Remove Caption + reset css settings on image $('.materialbox-caption').velocity({opacity: 0}, { duration: outDuration, // Delay prevents animation overlapping queue: false, easing: 'easeOutQuad', complete: function(){ $(this).remove(); } }); } }); }; $(document).ready(function(){ $('.materialboxed').materialbox(); }); }( jQuery )); Тут вот пробовали переделывать скрипт https://github.com/ivellios/material...materialbox.js У меня при нажатии на него отображается индикатор бесконечной загрузки под картинкой, а в полный экран с оригиналом не переходит. |
Цитата:
|
Нет возможности сделать превью и при клике открытие оригинала на полный экран. Очень нужно превью.
http://materializecss.com/media.html |
bonny, смените библиотеку.
Используйте, например, "fancybox". |
Ну наверное она как минимум в дизайн должна вписываться?
|
bonny, у fancy и текущей либы дизайн сильно отличается?
Прозрачность фона иная? |
Фон в materialbox тёмно-серый (почти чёрный). Прозрачности нет.
|
materialbox preview and full
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> |
Огонь!!
Правда картинка превью "прыгает" при открытии на полный экран. Я так полагаю свойства оригинальной картинки применяются. Это можно как-нибудь решить? Просто разметка же едет... Можете посмотреть как у меня разметка скачет http://cmit21.tmweb.ru/gallery.html?galAlbum=1 |
bonny,
лучше к специалистам по дизайну, ниже код поставить после всех стилей. <style type="text/css"> .material-placeholder { position: relative; } .card{ margin-bottom: 80%; } .card .card-image img{ display: block; position: absolute; } </style> |
Часовой пояс GMT +3, время: 11:03. |