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

[bonny]

рони,
спасибо за участие!
В Вашем варианте получалось так, что тень от карточки-картинки вообще не понятно куда девалась...
Я сделал так

<style type="text/css">
    .card .card-image.pic { display: table-cell; }
    .card .card-image.pic img { border-radius: 0 !important; }
</style>

<div class="col s6 m4 l4">
    <div class="card hoverable">
        <div class="card-image pic">
            <img class="materialboxed" data-caption="[[+name]]" src="[[+thumbnail]]" data-src="[[+image]]" />
        </div>
    </div>
</div>

Можно без последней строки, но получилось так, что там рамки начали появляться по 1-2 пикселей между картинкой и слоем подложкой, от которой идёт тень. Нашёл виновника. Не понял зачем он нужен.

А... Похоже не очень помогла моя реализация, когда превьюшка квадратная, а картинка нет. В классе material-placeholder выставляется свойства оригинала картинки .

[bonny]

По моему существует ещё одна проблема. Иногда при открытии не открывается оригинал. Открывается пустое окно. Я думаю это связано с тем, что не успевает загрузиться картинка. Поэтому, в варианте, где другие пробовали сделать реализована ожидание загрузки. Под картинкой работал индикатор загрузки (Но что они сделали у меня не работал). Это решается как-то?

[рони]

bonny,
далее к специалистам по css, в скрипте добавлена только ссылка на оригинал и его размеры, ничего в структуре скрипта не изменено, какое там было изменение css заложено, такое и осталось.

[рони]

bonny,
загрузка оригинала происходит в момент инициализации скрипта, прелоад заранее идёт. возможно я не смог учесть, всех нюансов и вам лучшше поискать другой плагин типа lightbox

[bonny]

Я правильно понимаю, что скрипт не знает размеры превьюшки?

[рони]

что скрипт не знает размеры превьюшки?

???
скрипт в курсе размера и места превьюшки и размера оригинала, место оригинала будет вычислено в центре окна, на момент клика.

[bonny]

При активации классу material-placeholder применяется стиль с высотой от оригинального изображения.
http://prntscr.com/hh8ott
(Превьюшка должна быть квадратная в данном случае. А скрипт размер по высоте под оригинальную картинку применил)
В скрипте это вот.. http://prntscr.com/hh8q7q

Нужно попробовать сделать, чтобы там применялась высота по превьюшке.

[рони]

bonny,
не особо понимаю в чём ваши проблемы, всё что мог написано выше.

[bonny]

рони,
если бы вы сказали, где в скрипте высота превьюшки, то было бы прекрасно...

[рони]

bonny, var e=a.parent(".material-placeholder"),c=window.innerWidth,g=window.innerHe ight,k=a.width(),d=a.height();


исходный код
var placeholder = origin.parent('.material-placeholder');
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var originalWidth = origin.width();
var originalHeight = origin.height();