Оригинал картинки в полноэкранном режиме
Есть скрипт 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, время: 14:32. |