Seite 1 Laden jQuery(document).ready(function($) { // Funktion zum Laden der Seiteninhalte function loadPageContent(pageSlug, screenElement) { $(screenElement).html(''); $.ajax({ url: ajax_object.ajaxurl, method: 'POST', data: { action: 'load_page_content', page_slug: pageSlug // Jetzt verwenden wir den Slug statt der ID }, success: function(response) { $(screenElement).html(response); }, error: function() { $(screenElement).html('

Fehler beim Laden des Inhalts.

'); } }); } // Scroll-Event für das horizontale Scrollen $('.horizontal-scroll-container').on('scroll', function(event) { const scrollPosition = event.target.scrollLeft; const screenWidth = window.innerWidth; const currentIndex = Math.floor(scrollPosition / screenWidth); const screenElements = document.querySelectorAll('.screen'); const screenElement = screenElements[currentIndex]; if (screenElement) { const pageSlug = screenElement.dataset.pageSlug; // Wir holen uns den Slug // Wenn der Inhalt noch nicht geladen ist, lade ihn per AJAX if (!screenElement.classList.contains('content-loaded')) { loadPageContent(pageSlug, screenElement); screenElement.classList.add('content-loaded'); // Markiere das Screen-Element als "geladen" } } }); // Optional: Scroll-Modus-Toggle (für horizontales/vertikales Scrollen) $('.toggle-scroll').on('click', function() { let container = $('.horizontal-scroll-container'); container.toggleClass('vertical-scroll-container horizontal-scroll-container'); }); // Alle Screens durchgehen und Inhalte sofort laden (bei Initialisierung) $('.screen').each(function() { const pageSlug = $(this).data('page-slug'); // Slug anstelle von ID if (pageSlug) { loadPageContent(pageSlug, this); // Den Inhalt für den Slug laden $(this).addClass('content-loaded'); } }); });