Объемная галерея

Модификация позволяет добавить объемную галерею, с возможностью настроить параметры для галереи и изображений
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
82936766
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
1 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
Создаем Zero Block и открываем редактор
  1. Добавляем изображения для галереи
  2. Задаем им класс .tistols-gallery-image
  3. Добавляем html-элемент
  4. Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
  5. Задаем размеры ширины и высоты по 100%
  6. Копируем код в html-элемент
2 шаг
Скопировать код
3 шаг
Внизу кода html-элемента есть комментарий для каждого параметра, можете настроить необходимые значения.

Для добавления второй и следующих галерей на той же странице, необходимо добавить только 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-height="500px"
     data-image-border-radius="20px" 
     data-opened-image-border-radius="20px" 
     data-grayscale="false" 
     data-inertia-max-v="1.4" 
     data-inertia-multiplier="80" 
     data-inertia-history-ms="50" 
     data-inertia-sample-ms="50" 
     data-inertia-scale="1" 
     data-inertia-clamp="0.2"
     data-preserve-aspect="true"
     data-randomize-images="true"
     data-disable-enlarge="false"
     data-auto-rotate="false"
     data-auto-rotate-speed="10"
     data-auto-rotate-axis="y"
     data-auto-rotate-resume-ms="1200"
     data-inertia-persistent="true"
     data-inertia-friction="1"
></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 — ограничение скорости инерции.
data-preserve-aspect - сохранение соотношения сторон открытой картинки
data-randomize-images="true" - рандомизация положения изображений
data-disable-enlarge="false" - отключение возможности открытие изображения
data-auto-rotate - true/false - автоматический поворот
data-auto-rotate-speed - float - скорость автоматического поворота
data-auto-rotate-axis - x/y/xy - направление поворота
data-auto-rotate-resume-ms - int - время ожидание перед восстановлением автоповорота
data-inertia-persistent -  true/false - сохранение инерции
data-inertia-friction - 0-1 - сила трения
-->
<!--TS26 - Модификация для Тильды. Объемная галерея https://mod.tistols.com/volumetric-gallery-->

<script type="module" crossorigin src="https://mods.tistols.com/mods/volumetric-gallery/volumetric-gallery-42wf32JK.js"> </script>
Вам также может быть интересно: