Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 30.11.2017, 12:04
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

рони,
спасибо за участие!
В Вашем варианте получалось так, что тень от карточки-картинки вообще не понятно куда девалась...
Я сделал так
<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, 30.11.2017 в 22:07.
Ответить с цитированием
  #12 (permalink)  
Старый 30.11.2017, 12:16
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

По моему существует ещё одна проблема. Иногда при открытии не открывается оригинал. Открывается пустое окно. Я думаю это связано с тем, что не успевает загрузиться картинка. Поэтому, в варианте, где другие пробовали сделать реализована ожидание загрузки. Под картинкой работал индикатор загрузки (Но что они сделали у меня не работал). Это решается как-то?
Ответить с цитированием
  #13 (permalink)  
Старый 30.11.2017, 12:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

bonny,
далее к специалистам по css, в скрипте добавлена только ссылка на оригинал и его размеры, ничего в структуре скрипта не изменено, какое там было изменение css заложено, такое и осталось.
Ответить с цитированием
  #14 (permalink)  
Старый 30.11.2017, 12:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

bonny,
загрузка оригинала происходит в момент инициализации скрипта, прелоад заранее идёт. возможно я не смог учесть, всех нюансов и вам лучшше поискать другой плагин типа lightbox
Ответить с цитированием
  #15 (permalink)  
Старый 30.11.2017, 14:25
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

Я правильно понимаю, что скрипт не знает размеры превьюшки?
Ответить с цитированием
  #16 (permalink)  
Старый 30.11.2017, 14:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Сообщение от bonny
что скрипт не знает размеры превьюшки?
???
скрипт в курсе размера и места превьюшки и размера оригинала, место оригинала будет вычислено в центре окна, на момент клика.
Ответить с цитированием
  #17 (permalink)  
Старый 30.11.2017, 15:53
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

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

Нужно попробовать сделать, чтобы там применялась высота по превьюшке.
Ответить с цитированием
  #18 (permalink)  
Старый 30.11.2017, 16:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

bonny,
не особо понимаю в чём ваши проблемы, всё что мог написано выше.
Ответить с цитированием
  #19 (permalink)  
Старый 30.11.2017, 18:46
Аспирант
Отправить личное сообщение для bonny Посмотреть профиль Найти все сообщения от bonny
 
Регистрация: 11.06.2017
Сообщений: 34

рони,
если бы вы сказали, где в скрипте высота превьюшки, то было бы прекрасно...
Ответить с цитированием
  #20 (permalink)  
Старый 30.11.2017, 19:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

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();
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки при нажатии на маленькие картинки comb Элементы интерфейса 4 23.03.2015 01:08
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 13:48
запустить браузер в полноэкранном режиме Yurik Firefox/Mozilla 12 18.06.2012 19:45
Получение координат от картинки EmDmAl Events/DOM/Window 4 08.11.2009 14:34
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42