Оригинал картинки в полноэкранном режиме

[bonny]

Есть скрипт matrialbox от команды materializecss, который на полный экран открывает картинку, но разработчики в превью и оригинал вместе не смогли. Искал решения, вроде что-то есть, но она не работает почему-то.

Может кто-то придумает обходное решение, чтобы на странице отображалось превью, а при открытии оригинал. Костыль что ли какой-нибудь. Или вообще кто-то умеет и сможет переделать отображение оригинала в полноэкранном режиме, который брал бы из в параметра data-original, например.

<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
У меня при нажатии на него отображается индикатор бесконечной загрузки под картинкой, а в полный экран с оригиналом не переходит.

[рони]

Есть скрипт matrialbox от команды materializecss, который на полный экран открывает картинку, но разработчики в превью и оригинал вместе не смогли. Искал решения, вроде что-то есть, но она не работает почему-то.

можно перевод?

[bonny]

Нет возможности сделать превью и при клике открытие оригинала на полный экран. Очень нужно превью.

http://materializecss.com/media.html

[Nexus]

bonny, смените библиотеку.
Используйте, например, "fancybox".

[bonny]

Ну наверное она как минимум в дизайн должна вписываться?

[Nexus]

bonny, у fancy и текущей либы дизайн сильно отличается?
Прозрачность фона иная?

[bonny]

Фон в materialbox тёмно-серый (почти чёрный). Прозрачности нет.

[рони]

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>

[bonny]

Огонь!!
Правда картинка превью "прыгает" при открытии на полный экран. Я так полагаю свойства оригинальной картинки применяются. Это можно как-нибудь решить?
Просто разметка же едет...
Можете посмотреть как у меня разметка скачет
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>