© 2008-2024 г.
Все права защищены
Алексей Костюк

Решено. Кнопка скрытия и показа для галереи Elementor Wordpress

Появилась задача от клиента сделать так, чтобы показывать картинки в галереи Elementor не полностью и скрывать за кнопкой "Показать еще работы" при нажатии которой будут показываться все картинки.

1. Добавляете галерею Elementor на страницу, загружаете фото, настраиваете по своему вкусу и после нее добавляете кнопку, которой назначаете класс show-more.

2. Далее я написал довольно простой скрипт, который скрывает все картинки и показывает нужное число, у меня выставлено на показ 12 штук.

body e-gallery-item:nth-child(-n+12)

Код скрипта:

document.addEventListener("DOMContentLoaded", function () {
    const style = document.createElement("style");
    style.textContent = `
        body .e-gallery-item {
            display: none;
        }
        body e-gallery-item:nth-child(-n+12) {
            display: block;
        }
        body .show-more {
            display: block;
            text-align: center;
            margin: 20px 0;
            cursor: pointer;
            color: #0073e6;
        }
        body .show-more:hover {
            text-decoration: underline;
        }
    `;
    document.head.appendChild(style);
    const showMoreButton = document.querySelector('.show-more');
    const galleryItems = document.querySelectorAll('.e-gallery-item');

    if (showMoreButton && galleryItems.length) {
        showMoreButton.addEventListener('click', function () {
            galleryItems.forEach(item => {
                item.style.display = 'block';
            });
            showMoreButton.style.display = 'none';
        });
    }
});

Вы можете поменять на свое количество например -n+6. Код скрипта нужно разместить в custom code Elementor,а если у вас не Pro версия, то с помощь. плагина WP Snippets или блоком HTML в Elementor.

Демонстрация работы галереи:

Если вы хотите сделать так, чтобы кнопка не пропадала после показа всех картинок, текст в ней менялся на Скрыть работы и можно было скрыть картинки как в первоначальном состоянии, то немного дополню скрипт:

document.addEventListener("DOMContentLoaded", function () {
    const style = document.createElement("style");
    style.textContent = `
        body .e-gallery-item {
            display: none;
        }
        body .e-gallery-item:nth-child(-n+12) {
            display: block;
        }
        body .show-more {
            display: block;
            text-align: center;
            margin: 20px 0;
            cursor: pointer;
            color: #0073e6;
        }
        body .show-more:hover {
            text-decoration: underline;
        }
    `;
    document.head.appendChild(style);

    const showMoreButton = document.querySelector('.show-more');
    const galleryItems = document.querySelectorAll('.e-gallery-item');

    let isExpanded = false; // Переменная для отслеживания состояния

    if (showMoreButton && galleryItems.length) {
        showMoreButton.addEventListener('click', function () {
            if (!isExpanded) {
                // Если галерея свернута, показываем все элементы и меняем текст на "Скрыть работы"
                galleryItems.forEach(item => {
                    item.style.display = 'block';
                });
                showMoreButton.textContent = 'Скрыть работы';
            } else {
                // Если галерея развернута, скрываем элементы, кроме первых 12, и меняем текст на "Показать еще работы"
                galleryItems.forEach((item, index) => {
                    if (index >= 12) {
                        item.style.display = 'none';
                    }
                });
                showMoreButton.textContent = 'Показать еще работы';
            }
            isExpanded = !isExpanded; // Инвертируем состояние
        });
    }
});
Привет Username! Я Алексей Костюк
14 лет занимаюсь тем, что помогаю людям создавать сайты и дизайн, настраивать рекламу, продвигать проекты в Интернете. Я создал этот блог, чтобы делиться своим опытом и мыслями, а если вы хотите, то можете меня поддержать, это поможет мне создавать больше полезных статей для вас.

Похожие посты

Решено. Слайдер Swiper не прокручивает слайды если количество в slidesPerView равно количеству слайдов

Столкнулся с одним багом, а может это так задумал разработчик Swiper Slider, что если количество слайдов равно количеству указанных для показа в параметре slidesPerView, то…