Бесконечная галерея

Модификация позволяет добавить бесконечную галерею, с возможностью загрузить изображения, задать скорость, интерактивность и др. параметры
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
137143606
Для корректной работы модификаций подключите библиотеку 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 на новый, он же послужит классом для изображений.
Настраиваем параметры галереи
<!--TS48 - Модификация для Тильды. Бесконечная галерея https://mod.tistols.com/endless-gallery-->
<div
  class="endless-gallery"
  data-density="1"
  data-image-size="14"
  data-cell-size="110"
  data-view-range="2"
  data-fog-near="120"
  data-fog-far="320"
  data-drag-speed="1"
  data-drift-amount="8"
  data-friction="0.9"
  data-auto-zoom="true"
  data-auto-zoom-speed="0.5"
  data-image-radius="0.06"
  data-allow-image-focus-on-click="true"
  data-background-color="#000000"
  data-fog-color="#000000"
></div>
<!-- images: Массив изображений, содержащий URL-адрес и внутренние размеры (data-images='[{"url": "https://example.com/1.jpg", "width": 800, "height": 600}] - через запятую перечислять объекты {}') -->
<!-- density: Плотность изображений в одной ячейке сетки. (От 1 до 15 — чем больше значение, тем больше картинок отображается в каждой ячейке) -->
<!-- image-size: Базовый размер каждого изображения в 3D-пространстве. (От 4 до 40 — влияет на визуальный масштаб карточек) -->
<!-- cell-size: Размер одной ячейки сетки в мировых единицах. (От 30 до 300 — чем больше значение, тем дальше друг от друга располагаются группы изображений) -->
<!-- view-range: Дальность рендера вокруг камеры в ячейках. (От 1 до 4 — увеличивает или уменьшает область видимости галереи) -->
<!-- fog-near: Начальная дистанция появления тумана. (От 10 до 500 — определяет, с какого расстояния сцена начинает затухать в туман) -->
<!-- fog-far: Конечная дистанция тумана. (От 50 до 800 — на этом расстоянии объекты полностью скрываются в тумане) -->
<!-- drag-speed: Чувствительность перетаскивания и скролла. (От 0.1 до 5 — влияет на скорость перемещения по галерее) -->
<!-- drift-amount: Сила параллакс-смещения от движения мыши. (От 0 до 20 — добавляет «плавание» изображений при движении курсора) -->
<!-- friction: Коэффициент затухания скорости движения. (От 0 до 1 — 0 = мгновенная остановка, 1 = движение почти не замедляется) -->
<!-- auto-zoom: Автоматическое приближение камеры. (true/false — включает постоянное движение вперёд без участия пользователя) -->
<!-- auto-zoom-speed: Скорость автоматического зума. (От 0.1 до 3 — регулирует скорость движения вперёд) -->
<!-- image-radius: Скругление углов изображений. (От 0 до 1 — доля от короткой стороны изображения) -->
<!-- allow-image-focus-on-click: Возможность фокусировки на изображении по клику. (true/false — включает эффект приближения к выбранной картинке) -->
<!-- background-color: Цвет фона сцены. (HEX-цвет — задаёт общий фон галереи) -->
<!-- fog-color: Цвет тумана. (HEX-цвет — обычно совпадает с фоном для плавного исчезновения объектов) -->
<!--TS48 - Модификация для Тильды. Бесконечная галерея https://mod.tistols.com/endless-gallery-->
<script type="module" crossorigin src="https://tilda.tistols.com/mods/endless-gallery/endless-gallery-fspb2f09ky.js"></script>
<link rel="stylesheet" href="https://tilda.tistols.com/mods/endless-gallery/endless-gallery-fspb2f09ky.css">
Вам также может быть интересно:
дня
час
минут
секунд
-
-
-
-
+ Месяц тарифа Club за 2000₽
Предложение актуально только для пользователей Pro