Объемная галерея
Модификация позволяет добавить объемную галерею, с возможностью настроить параметры для галереи и изображений
Инструкция по настройке
Шаблон страницы
62707407
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
1 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
Создаем Zero Block и открываем редактор
- Добавляем изображения для галереи
- Задаем им класс .tistols-gallery-image
- Добавляем html-элемент
- Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
- Задаем размеры ширины и высоты по 100%
- Копируем код в html-элемент
2 шаг
Скопировать код
3 шаг
Внизу кода html-элемента есть комментарий для каждого параметра, можете настроить необходимые значения.
Для добавления второй и следующих галерей на той же странице, необходимо добавить только html-элемент с тем же кодом, но заменить параметр
data-image-container на новый, он же послужит классом для изображений.
Для добавления второй и следующих галерей на той же странице, необходимо добавить только html-элемент с тем же кодом, но заменить параметр
data-image-container на новый, он же послужит классом для изображений.
Настраиваем параметры галереи
<!--TS26 - Модификация для Тильды. Объемная галерея https://mod.tistols.com/volumetric-gallery-->
<div class="tistols-gallery"
data-image-container=".tistols-gallery-image"
style="height:100%"
data-max-vertical-rotation-deg="5"
data-drag-sensitivity="10"
data-enlarge-transition-ms="300"
data-segments="34"
data-fit="1"
data-fit-basis="auto"
data-min-radius="400"
data-max-radius="Infinity"
data-pad-factor="0.25"
data-overlay-blur-color="#FFFFFF00"
data-drag-dampening="2"
data-opened-image-width="300px"
data-opened-image-height="300px"
data-image-border-radius="30px"
data-opened-image-border-radius="20px"
data-grayscale="false"
data-inertia-max-v="1.4"
data-inertia-multiplier="80"
data-inertia-history-ms="150"
data-inertia-sample-ms="120"
data-inertia-scale="0.02"
data-inertia-clamp="1.2"
></div>
<!--
data-image-container — класс для изображений.
data-max-vertical-rotation-deg —максимальный вертикальный поворот сферы.
data-drag-sensitivity — чувствительность перетаскивания мышью/тачем.
data-enlarge-transition-ms — длительность анимации открытия изображения.
data-segments — количество сегментов/тайлов в сфере.
data-fit — множитель радиуса сферы относительно контейнера.
data-fit-basis — string. 'auto' / 'min' / 'max' / 'width' / 'height' – база для расчёта радиуса.
data-min-radius - минимальный радиус сферы.
data-max-radius — максимальный радиус сферы.
data-pad-factor — отступы для viewer/оверлея.
data-overlay-blur-color — цвет размытого оверлея.
data-drag-dampening — замедление перетаскивания (для инерции).
data-opened-image-width — ширина увеличенного изображения (px / %).
data-opened-image-height — высота увеличенного изображения (px / %).
data-image-border-radius — скругление тайлов сферы.
data-opened-image-border-radius — скругление увеличенного изображения.
data-grayscale — применять grayscale к изображению (true/false).
data-inertia-max-v — максимальная скорость инерции.
data-inertia-multiplier — множитель для инерции.
data-inertia-history-ms — время истории для расчёта скорости drag (ms).
data-inertia-sample-ms — окно для расчёта скорости drag (ms).
data-inertia-scale — масштаб скорости drag к вращению.
data-inertia-clamp — ограничение скорости инерции.
--><!--TS26 - Модификация для Тильды. Объемная галерея https://mod.tistols.com/volumetric-gallery-->
<script type="module" crossorigin src="https://mods.tistols.com/mods/volumetric-gallery/volumetric-gallery-42wf32JK.js"> </script>Вам также может быть интересно: