Локальные изображения HTML Slideshow отображаются при открытии непосредственно без сервера ⇐ Html

[Anonymous]

Я строю местное слайд -шоу HTML для свадьбы. Я хочу иметь возможность дважды щелкнуть index.html и заставить его работать без настройки сервера. Изображение наложений не показывает-на экране просто черный в течение этого времени.

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

Wedding Show/
├── index.html
└── images/
└── overlay/
├── welcome1.jpg
├── welcome2.jpg
└── welcome3.jpg
< /code>



const config = {
baseSlideShowUrl: "https://gallery.captureeverymemory.com/frame/slideshow?key=bRFrVp&speed=10&transition=fade&autoStart=1&captions=0&navigation=0&playButton=0&randomize=0&transitionSpeed=2",
localOverlayImages: ['welcome1.jpg', 'welcome2.jpg', 'welcome3.jpg'],
localOverlayPath: 'images/overlay/',
localPhotoDisplayTime: 60000,
localPhotoSelectionInterval: 1800000,
};

const state = {
shownLocalPhotos: new Set(),
isOverlayVisible: false,
};

function getRandomLocalPhoto() {
const unused = config.localOverlayImages.filter(img => !state.shownLocalPhotos.has(img));
if (unused.length === 0) state.shownLocalPhotos.clear();
const list = unused.length ? unused : config.localOverlayImages;
const img = list[Math.floor(Math.random() * list.length)];
state.shownLocalPhotos.add(img);
return img;
}

function displayLocalOverlayPhoto() {
const overlay = document.getElementById('googleDriveSlideshow');
const gallery = document.getElementById('onlineGallery');
const indicator = document.getElementById('googleDriveIndicator');
const img = getRandomLocalPhoto();

overlay.style.backgroundImage = `url('${config.localOverlayPath}${img}')`;
overlay.style.display = 'block';
gallery.style.visibility = 'hidden';
indicator.style.display = 'block';
state.isOverlayVisible = true;

setTimeout(() => {
overlay.style.display = 'none';
gallery.style.visibility = 'visible';
indicator.style.display = 'none';
state.isOverlayVisible = false;
}, config.localPhotoDisplayTime);
}

function scheduleLocalOverlayDisplay() {
setInterval(() => {
if (!state.isOverlayVisible) displayLocalOverlayPhoto();
}, config.localPhotoSelectionInterval);
setTimeout(displayLocalOverlayPhoto, 10000); // initial display after 10 sec
}

function refreshSlideshow() {
const frame = document.getElementById('onlineGallery');
frame.src = config.baseSlideShowUrl + "&refresh=" + new Date().getTime();
}

function initialize() {
refreshSlideshow();
scheduleLocalOverlayDisplay();
}

window.onload = initialize;< /code>
        html, body {
margin: 0; padding: 0; height: 100%; overflow: hidden; background: black;
}
#slideshowContainer {
width: 100vw; height: 100vh; position: relative; background: black;
}
#onlineGallery {
width: 100%; height: 100%; border: none;
position: absolute; top: 0; left: 0; z-index: 1;
}
#googleDriveSlideshow {
width: 100%; height: 100%;
position: absolute; top: 0; left: 0; z-index: 2;
display: none;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: black;
}
#googleDriveIndicator {
position: absolute; top: 20px; left: 20px; z-index: 4;
background-color: rgba(255,255,255,0.8);
color: #333; padding: 10px 15px;
font-family: Arial, sans-serif; font-weight: bold;
border-radius: 5px; display: none;
}< /code>
 




Wedding Slideshow





Displaying Special Photo

Когда я открываю index.html, дважды щелкнув (файл: // path), слайд-шоу работает нормально, но наложение не отображается-просто черный экран. URL ('Images/overlay/filename.jpg') для работы при запуске HTML из файла: //, или мне нужно переключиться на локальный сервер или использовать локальный сервер?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... t-a-server