Untitled

HTML PART

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript" src="gallery.js" defer></script>
    <!-- Use defer for loading gallery if js is in the header -->
    <title>new Page v0</title>

</head>
<body>

    <div class="gallery">
        <div id="imageContainer">
        <img id="currentImage" class="current" src="" alt="currentImage">
        <img id="nextImage" class="next" src="" alt="nextImage">
        <!-- <script type="text/javascript" src="gallery.js"></script> -->
      </div>
    </div>
</body>
</html>

----------------------------------

CSS PART

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
}

body {
  margin: 0;
}

#currentImage, #nextImage {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    /* opacity: 1;
    transition: opacity 1s ease-in-out; */
}

#imageContainer {
/*   display: flex;
  flex-direction: row;
  flex-wrap: wrap; */
/*   align-items: flex-end;
  display: block; */
/*  align-items: initial; */
  position: relative;
}

.current {
  opacity: 1;
  transition: opacity 2s linear;
}

.next {
  opacity: 0;
  transition: opacity 2s linear;
}

.gallery {
/*   display: flex;
  flex-direction: row;
  flex-wrap: wrap; */
  justify-content: center;
  align-items: center;
  /*background-color: darkolivegreen;*/
  /* border: 2px solid red */;
  width: 100%;
  height: 450px;
  /* margin: 0 auto 200px; */
  margin: 100px auto;
}

-------------------------------------

Javascript


let imgNamesArray;
let currentIndex = 0;
let previousIndex = -1;
let isCrossfading = false;
const fadeDuration = 1000;

let currentImage = document.getElementById('currentImage');
let nextImage = document.getElementById('nextImage');

const preloadedImages = [];

function preloadImages() {
    for (let i = 0; i < imgNamesArray.length; i++) {
        const image = new Image();
        image.src = `./images/${imgNamesArray[i]}`;
        image.onload = () => {
            // You can optionally do something when each image is preloaded
        };
    }
}

fetch("gallery.php")
.then(Response => Response.json())
.then(fetchedData => {
    // should I do something with imgNames ?
    imgNamesArray = fetchedData;
    console.log(imgNamesArray);
    //const currentImage = document.getElementById('currentImage');
    //currentImage.src = `./images/${imgNamesArray[0]}`;
    // displayNextImage();

    preloadImages();

    const initialIndex = Math.floor(Math.random() * imgNamesArray.length);
    const initialImageSrc = `./images/${imgNamesArray[initialIndex]}`;
    currentImage.src = initialImageSrc;

    /* setInterval(() => {
        // displayNextImage();
        crossfade();
    }, 5000); */

    setInterval(crossfadeII, 5000);

})
.catch(error => console.error("Error: ", error));


function displayNextImage() {
    currentIndex = (currentIndex + 1) % imgNamesArray.length;
    console.log(currentIndex);
    const currentImage = document.getElementById("currentImage");
    currentImage.src = `./images/${imgNamesArray[currentIndex]}`;
}

function crossfadeII() {

    let newIndex;

// Loading not same images.

    do {
        newIndex = Math.floor(Math.random() * imgNamesArray.length);
    } while (newIndex === previousIndex || newIndex === currentIndex);

    previousIndex = currentIndex;
    currentIndex = newIndex;

    // Preload the next image - will it help ?

    const preloadIndex = (currentIndex + 1) % imgNamesArray.length;
    const preloadImage = new Image();

    preloadImage.src = `./images/${imgNamesArray[preloadIndex]}`;
    currentImage.src = `./images/${imgNamesArray[currentIndex]}`;

    console.log(`previousIndex: ${previousIndex}, currentIndex: ${currentIndex}, newIndex: ${newIndex}, match: ${previousIndex === currentIndex ? "matched" : newIndex}`);

   // currentIndex = (currentIndex + 1) % imgNamesArray.length;

    if (currentImage.classList.contains("current")) {
        currentImage.classList.remove("current");
        currentImage.classList.add("next");
    } else {
        currentImage.classList.remove("next");
        currentImage.classList.add("current");
    }

    if (nextImage.classList.contains("next")) {
        nextImage.classList.remove("next");
        nextImage.classList.add("current");

        nextImage.src = `./images/${imgNamesArray[previousIndex]}`;
        // preloadImages();
    } else {
        // console.log("lets imagine");
        nextImage.classList.remove("current");
        nextImage.classList.add("next");
    }

// rest not used.
    // currentImage.src = `./images/${imgNamesArray[currentIndex]}`;

    /* currentImage.classList.remove("current");
    currentImage.classList.add("next");


    nextImage.classList.remove("next");
    nextImage.classList.add("current"); */


}