Нестандартная галерея в Zero Block

Нестандартная галерея в тильде при помощи скрипта

Всем привет! Мир!Труд!Май!
Всех поздравляю с праздником Весны и Труда! Буду очень рада вашим лайкам, если данная статья будет вам полезна!

Сегодня я расскажу вам, как при помощи простого скрипта и Zero Block сделать красивую нестандартную галерею с плашками.

Начнем с 1 этапа - создание Zero Block на нашем сайте.

Если мы создаем с 0, то нажимаем на новой странице кнопочку ZERO.
Если на странице уже есть какие-то блоки, то нажимаем Все блоки - появляется меню слева - пролистываем меню до конца и нажимаем пункт - Нулевой блок (создай свой уникальный блок)

Шаг 1

Когда Zero Block добавлен на страницу нажимаем на нем кнопку - Редактировать блок.

Шаг 2 - редактирование блока

Удаляем все элементы, которые в нем расположены. Перед нами остается чистый лист )

Нажимаем на + и выбираем пункт Add Gallery (добавить галерею)

Важно понимать , что при добавлении скрипта будут учитываться начальные настройки блоки, чтобы все выглядело красиво нужно - нажать Setting и открыть настройки галереи.

В настройках галереи мы заменяем все фотографии - добавляем те, которые нужны нам.

Замена фотографий в галереи Тильды в зеро блоке

Убираем стрелочки , которые в галереи изначально и устанавливаем точки для перелистывания фотографий вне зоны самой галереи.

Убираем в галереи стрелочки для пролистывания фотографий

Добавляем точки снизу галереи.

Другие настройки нас сильно не интересуют.

Нажимаем кнопку Сохранить, а затем Закрыть. (Save, Close)

На этом настройки самой галереи закончены. Вы можете добавить рядом надписи , установить фон для блока, или растянуть галерею на всю страницу, это зависит от того, что именно вы хотите видеть в итоге.

Затем нажимаем на плюсик чтобы добавить новый блок.

В меню выбираем пункт Другое - блок Т123 (html - код) . Копируем код ниже и вставляем в этот блок.

<script>
document.addEventListener("DOMContentLoaded", function() {

(function () {

let zeroGallery = setInterval(function() {

const galleryElements = document.querySelectorAll('.thumber');

const galleryElementsLn = galleryElements.length;

let galleryLoaded = 0;

for (let i = 0; i < galleryElementsLn; i++) {

const slidsImage = galleryElements[i].querySelectorAll('.tn-atom__slds-img');

if( slidsImage.length ){

galleryLoaded++;

for (let j = 1; j < slidsImage.length-1; j++) {

let urlBg = "";

if (slidsImage[j].hasAttribute("data-original")) {

urlBg = slidsImage[j].getAttribute("data-original");

urlBg = `url('${urlBg}')`

}else{

urlBg = slidsImage[j].style.backgroundImage;};let bullet = slidsImage[j].closest('.t-slds').querySelector('.t-slds__bullet[data-slide-bullet-for="'+j+'"]');if(bullet!=null){bullet.style.backgroundImage = urlBg;};};};

if(galleryLoaded==galleryElementsLn){

clearInterval(zeroGallery);};};}, 100);})();});

</script>

Нажимаем сохранить и закрыть. А затем ОБЯЗАТЕЛЬНО нажимаем кнопку ОПУБЛИКОВАТЬ!

Магия) Все готово ! Вы получите на странице галерею с плашками)

Буду очень благодарная вашим лайками, если это было полезно для вас! Если есть вопросы пишите , я с удовольствием на них отвечу!
И буду рада видеть вас в своем телеграмм канале!