Tigran5233
Newbie | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Лирическое вступление:
Создаю свою галерею по типу лайтбокс на чистом Javascript. Сразу говорю, в Javascript мой опыт близок к 0, взял готовое решение и переделываю под себя, пользуясь поиском в Интернете.
Галерея практически готова: она свёрстана, осталось лишь добавить функционал листания (скролла) миниатюр снизу по кликам вправо и влево, если не помещается миниатюра текущего слайда в скролл (overflow-x: auto;).
CSS-код родителя с горизонтальным скроллом и вычисляемого элемента
.columns {
display: inline-block;
height: 20%;
margin: 0 -5px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
overflow-x: auto;
text-overflow: clip;
}
/* Сама миниатюрка (по сути: контейнер для img), ширину которого нужно вычислить */
.column {
border-bottom: 10px solid black;
display: inline-block;
height: 100%;
margin: 0 auto;
max-width: 30vh;
min-width: 150px;
padding: 0 5px;
width: auto;
}
Javascript-фрагмент, вставленный в функцию открытия модального окна с галереей (не вся функция, только тот код, который имеет отношение к вопросу)
slideCount = count;
// Планируется цикл, формирующий массивы со значениями ширины, но пока 1 итерацию довести до ума, потом раскомментирую, заменив на переменную число
//for(var i=1; i<=slideCount; i++ ) {
element = document.querySelector('.column:nth-child('+ 1 +')');
var c=window.getComputedStyle(element, null);
slideAllWidth[1]=parseInt(c.width)+"px";
//}
console.log(c);
alert(slideAllWidth[1]);
Для лучшего понимания, прикрепляю скриншот галереи, где .column и .сolumns находятся внизу
В итоге, что имею в сухом остатке?
Когда смотрю логи, в width пишет вполне себе правильную фактическую ширину, например, при тестируемой на момент печати ширине "184.578px", что включает в себя боковые пэддинги (без них 174.578px) и меня вполне устраивает, причём подчеркну, что явно больше, чем минимальная ширина 150px, которую я задал в CSS, однако в alert() мне выводит почему-то минимальную ширину, а не фактическую, которую, по идее getComputedStyle вычисляет правильно, однако выводит отдельное свойство неправильно, ошибочно выводя минимальную ширину
Вопрос
Как сделать так, чтобы в slideAllWidth[1] принималась правильная ширина, а не минимальная, фактическая ширина которой выше минимальной, подчёркиваю? |
Всего записей: 7 | Зарегистр. 02-02-2021 | Отправлено: 13:18 31-03-2022 | Исправлено: Tigran5233, 14:09 31-03-2022 |
|
