Код PHP Pop Up Slider работает на локальном хосте, но не на сервере веб-хостинга ⇐ Php

[Anonymous]

Я пытаюсь создать всплывающий слайдер на своей домашней странице. Я сгенерировал код с помощью ChatGPT, и он отлично работает в моей локальной настройке XAMPP, когда я включаю его сразу в начало файла index.php. Однако на моем сервере веб-хостинга включение его сразу после header.php приводит к появлению всплывающего окна без отображения содержимого. Когда я помещаю его после footer.php, всплывающее окно отображается с содержимым, но появляется под нижним колонтитулом. Почему это может произойти?

Код: Выделить всё

$(document).ready(function() {
let currentPage = 0;
const pages = $(".dialog-page");
const pageCount = pages.length;

function showPage(index) {
pages.hide();
$(pages[index]).show();
updateIndicators(index);
}

function updateIndicators(index) {
$(".indicator").removeClass("active");
$(".indicator").eq(index).addClass("active");
}

$("#dialog-message-a").dialog({
width: '90%', // Set the width to 90% for better responsiveness
maxWidth: 900, // Max width to maintain size on larger screens
height: 'auto', // Auto height based on content
autoOpen: true,
modal: true,
position: { my: "center", at: "top+100", of: window },
show: { effect: "blind", duration: 700 },
closeText: "Close"
});

$(".arrow-left").click(function() {
currentPage = (currentPage - 1 + pageCount) % pageCount;
showPage(currentPage);
});

$(".arrow-right").click(function() {
currentPage = (currentPage + 1) % pageCount;
showPage(currentPage);
});

setInterval(function() {
if ($("#dialog-message-a").dialog("isOpen")) {
currentPage = (currentPage + 1) % pageCount;
showPage(currentPage);
}
}, 5000);

// Generate indicators based on page count
for (let i = 0; i < pageCount; i++) {
$(".indicators").append('');
}

showPage(currentPage);
});




.dialog-page {
display: none;
overflow-y: auto;
text-align: center;
max-height: 100vh; /* Limit height to 80% of the viewport height */
}

.arrow-left, .arrow-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 50%;
user-select: none;
}

.arrow-left { left: 10px; }
.arrow-right { right: 10px; }

.indicators {
text-align: center;
margin-top: 20px;
}

.indicator {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background-color: #ddd;
}

.indicator.active {
background-color: #333;
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
.arrow-left, .arrow-right {
font-size: 18px; /* Smaller arrow size on mobile */
padding: 8px; /* Less padding */
}
#dialog-message-a {
width: 95%; /* More width on smaller screens */
max-height: 80vh; /* Limit height on mobile devices */
}
.dialog-page p {
font-size: 14pt; /* Slightly smaller font size */
}
.dialog-page img {
width: 100%; /* Ensure images take full width */
height: auto; /* Maintain aspect ratio */
}
}

@media (min-width: 601px) and (max-width: 900px) {
#dialog-message-a {
width: 90%; /* Less width for medium screens */
max-height: 90vh; /* Limit height for medium devices */
}
.dialog-page img {
width: 80%; /* Adjust image size for medium screens */
}
}

@media (min-width: 901px) {
#dialog-message-a {
max-height: 80vh; /* Limit height for larger screens */
}
}




◀


▶



Page 1



image



Page 3

Я пробую в xampp, все работает нормально, но не на одном сервере веб-хостинга.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ing-server