Elementor fotogalerie s Load More button (tlačítkem)

Elementor patří k jednomu z těch pluginů, který vám pomůže vytvořit jedinečnou grafiku na míru. Přestože dokáže neuvěřitelné věci, tak s jednou si prozatím v základní ani PRO verzi neumí poradit a to vytvoření fotogalerie s Load More (Načíst více) tlačítkem. Já mám pro vás jednoduché řešení, jak toho docílit, aniž byste museli instalovat další pluginy či složitě programovat. Jak tedy na to?

Fotogalerie pomocí ACF polí

Osobně mám ráda, když si uživatel může vše pěkně editovat v rámci administrace, proto vždy webové stránky stavím tak, aby byly maximálně editovatelné v rámci administrace WordPressu. Pro vytvoření fotogalerie používám placený plugin Advanced Custom Field PRO. Pokud se vám nechce investovat do placené verze, můžete nainstalovat free verzi a doinstalovat plugin ACF Photo Gallery Field. Poté vytvořte klasicky ACF pole – typ galerie a přiřaďte jej ke stránce, kde se má fotogalerie zobrazovat. 

Jakmile máte galerie vytvořenou, přiřazenou ke konkrétní stránce a v ní přidané obrázky, můžete přistoupoupit k vytvoření fotogalerie s Load More tlačítkem v Elementoru.

Elementor fotogalerie s tlačítkem Zobrazit více

1) V Elementoru otevřete šablonu do níž chcete galerii implementovat. Do vybraného kontejneru vložte widget s názvem Gallery. Widget si nastavte dle vašich priorit, podstatné však je, abyste mu v záložce „Pokročilé“ přiřadily CSS třídu „showmoreimages„

2) V dalším kroku pak pod tuto galerii vložíte další widget s názvem HTML.

a do těla tohoto widgetu vložíte následující kód: 

<script>
let galleries,
    shownAmount = 6, /* Kolik obrázků se zobrazí na začátku */
    loadMoreMessage = 'Zobrazit další'; /* Text tlačítka pro načítání více obrázků */

document.addEventListener('DOMContentLoaded', function () {
    galleries = document.querySelectorAll('.showmoreimages');
    galleries.forEach((gallery) => initializeGallery(gallery));
});

function initializeGallery(gallery) {
    let galleryItems = gallery.querySelectorAll('.elementor-gallery-item');
    let viewMoreContainer = document.createElement('div');
    viewMoreContainer.classList.add('view-more-container');
    gallery.appendChild(viewMoreContainer);

    // Schováme obrázky nad limit
    hideExcessImages(galleryItems);

    // Vytvoříme tlačítko "Načíst další"
    let loadMoreButton = document.createElement('button');
    loadMoreButton.innerText = loadMoreMessage;
    loadMoreButton.classList.add('load-more-btn');

    viewMoreContainer.appendChild(loadMoreButton);

    // Přidáme event listener na tlačítko
    loadMoreButton.addEventListener('click', function () {
        showMoreImages(galleryItems, loadMoreButton);
    });
}

function hideExcessImages(galleryItems) {
    for (let i = shownAmount; i < galleryItems.length; i++) {
        galleryItems[i].style.display = 'none';
    }
}

function showMoreImages(galleryItems, loadMoreButton) {
    let hiddenImages = Array.from(galleryItems).filter(item => item.style.display === 'none');
    let nextItemsToShow = hiddenImages.slice(0, shownAmount); // Zobrazíme další "shownAmount" obrázků

    nextItemsToShow.forEach(item => {
        item.style.display = 'block';
        item.classList.add('fade-in'); // Přidáme třídu s animací
    });

    // Pokud nejsou další skryté obrázky, tlačítko schováme
    if (hiddenImages.length <= shownAmount) {
        loadMoreButton.style.display = 'none';
    }
}

// CSS pro tlačítko a fade-in animaci
let css = `
.view-more-container {
    text-align: center;
    margin-top: 20px;
}

.load-more-btn {
    background-color: #0073e6;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.load-more-btn:hover {
    background-color: #005bb5;
}

/* Fade-in animace */
.elementor-gallery-item.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards; /* 1s animace */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
`;

let cssDiv = document.createElement('style');
cssDiv.innerHTML = css;
document.querySelector('head').appendChild(cssDiv);
</script>

A hotovo. Galerie, kde se bude načítat jen počet obrázků a další až po klepnutí na tlačítko „Načíst další“. V rámci výše uvedeného kódu si můžete změnit jak text, který se v tlačítku má zobrazovat, tak i u kodu shownAmount počet obrázků, které se mají před tlačítkem zobrazovat.