I need help integrating a fade effect between pictures on my slideshow script. #138074

JonathanPJL · 2024-09-07T23:32:24Z

JonathanPJL
Sep 7, 2024

Body

I am really close to making my slideshow work very well on my website. The only problem is, I would like a way to have the pictures fade from one picture to the other, just by adding a few lines of code to this script that I uploaded. I don't know code very well, and I have been using ChatGPT for a lot of help, but it's just not working this time. I need assistance with an actual person, not AI :) Thank you in advance!
My existing slideshow script is what I have pasted here: (Also, fixes to any other incorrect coding would be appreciated as well, if any is found.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>August 2024</title>		<!-- <-------------------------------------------------------------------------<<<<<< Change the title to the proper month and year on this line.-->
    <style>
        body {
            margin: 0;
            overflow: hidden;
            position: relative;
        }

        #slideshow-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            cursor: grab;
        }

        .navigation, .controls, #return {
            position: fixed;
            z-index: 2;
            cursor: pointer;
            padding: 15px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 1.2em;
            transition: background-color 0.3s ease;
        }

        .navigation:hover, .controls:hover, #return:hover {
            background-color: #555;
        }

        .navigation:active, .controls:active, #return:active {
            background-color: #777;
        }

        #backward {
            left: 20px;
        }

        #forward {
            right: 20px;
        }

        .controls {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
        }

        #return {
            top: 20px;
            left: 20px;
        }

        #counter {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.5em;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            z-index: 3;
        }

        .zoom-controls {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
        }

        .button {
            padding: 10px 15px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1.2em;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #555;
        }

        .button:active {
            background-color: #777;
        }

        #pause, #restart {
            padding: 2.5px 5px;
            font-size: 1.2em;
	    background-color: rgba(0, 0, 0, 0.0);
        }

        #zoom-in, #zoom-out, #reset-zoom {
            padding: 10px 15px;
        }

        #restart {
            margin-left: 10px;
        }

        @media (max-width: 768px) {
            .navigation, .controls, #return, .zoom-controls .button {
                padding: 10px;
                font-size: 1em;
            }

            .controls {
                bottom: 10px;
                gap: 10px;
            }

            .zoom-controls {
                top: 10px;
                right: 10px;
                gap: 5px;
            }

            #pause, #restart {
                padding: 5px 10px;
            }

            #zoom-in, #zoom-out, #reset-zoom {
                padding: 5px 10px;
            }

            #counter {
                top: 10px;
                font-size: 1em;
                padding: 5px 10px;
            }

            #backward {
                left: 10px;
            }

            #forward {
                right: 10px;
            }

            #return {
                top: 10px;
                left: 10px;
            }
        }

	.hidden {
  	  opacity: 0;               /* Make the buttons invisible */
  	  transition: opacity 0.5s ease-in-out;  /* Smooth fade-out effect */
  	  pointer-events: none;     /* Prevent button clicks when hidden */
	}

	.visible {
 	   opacity: 1;               /* Make the buttons visible */
	    transition: opacity 0.5s ease-in-out;  /* Smooth fade-in effect */
	}


        /* Loading Screen */

	#loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            flex-direction: column;
        }

        #loading-message {
            color: white;
            font-size: 1.25em;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #spinner {
            width: 20px;
            height: 20px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-top: 5px solid white;
            border-radius: 50%;
            animation: spin 1.25s cubic-bezier(0, 0, 0, 0) infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(720deg); }
            100% { transform: rotate(1080deg); }
        }

        #progress-bar-container {
            width: 80%;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            overflow: hidden;
        }

        #progress-bar {
            width: 0;
            height: 30px;
            background-color: green;
            border-radius: 10px;
            transition: width 0.3s ease;
        }

        #progress-text {
            margin-top: 20px;
            color: white;
            font-size: 4em;
        }

	#loading-dots span {
    	    display: inline-block;
            animation: bounce 1.4s infinite;
    	}

        #loading-dots span:nth-child(2) {
            animation-delay: 0.2s;
    	}

    	#loading-dots span:nth-child(3) {
            animation-delay: 0.4s;
    	}

    	@keyframes bounce {
    	    0%, 20%, 50%, 80%, 100% {
            	transform: translateY(0);
    	}
    	    40% {
        	transform: translateY(-10px);
        }
    	    60% {
        	transform: translateY(-5px);
        }
     }

    </style>
</head>
<body>

<div id="loading-screen">
    <div id="loading-message">
        This may take a few minutes. Please wait
	<span id="loading-dots">
        <span>.</span>
        <span>.</span>
        <span>.</span>
    </span> 
        <div id="spinner"></div>
    </div>
    <div id="progress-bar-container">
        <div id="progress-bar"></div>
    </div>
    <div id="progress-text">0%</div>
</div>


<div id="slideshow-container">
    <div id="counter">1 / 66</div>	<!-- <-------------------------------------------------------------------------<<<<<< Change the number of pictures to the correct amount on this line.-->
    <img src="" alt="Slideshow Image" id="slideshow-img">

    <div id="return" onclick="goToPreviousPage()">&#8617;</div>
    <div id="backward" class="navigation" onclick="goBack()">&#9665;</div>
    <div id="forward" class="navigation" onclick="goForward()">&#9655;</div>

    <div class="controls">
        <div id="pause" class="button" onclick="togglePause()">Pause</div>
        <div id="restart" class="button" onclick="restart()">Restart</div>
    </div>

    <div class="zoom-controls">
        <div id="zoom-in" class="button" onclick="panzoom.zoomIn(1.5)">+</div>
        <div id="reset-zoom" class="button" onclick="panzoom.reset()">Reset</div>
        <div id="zoom-out" class="button" onclick="panzoom.zoomOut(1.5)">-</div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<script>
    let currentImage = 1;
    let isPaused = false;
    let totalImages = 66;		<!-- <-------------------------------------------------------------------------<<<<<< Change the number of pictures to the correct amount on this line.-->
    const imgElement = document.getElementById('slideshow-img');
    let panzoom;
    let slideshowInterval;
    const intervalTime = 5000; // Interval time in milliseconds (5 seconds)

    let buttons = document.querySelectorAll('.navigation, .controls, #return, #zoom-in, #zoom-out, #reset-zoom'); // Select all buttons

    let timeout;

    // Function to hide buttons (fade out)
    function hideButtons() {
      buttons.forEach(button => button.classList.remove('visible'));
      buttons.forEach(button => button.classList.add('hidden'));
    }

    // Function to show buttons (fade in)
    function showButtons() {
      buttons.forEach(button => button.classList.remove('hidden'));
      buttons.forEach(button => button.classList.add('visible'));

      // Reset the timeout to hide buttons again after 3 seconds
      clearTimeout(timeout);
      timeout = setTimeout(hideButtons, 3000);
    }

    // Show buttons on mouse move or touch
    document.addEventListener('mousemove', showButtons);
    document.addEventListener('touchstart', showButtons);

    // Initial timeout to hide buttons after 3 seconds
    timeout = setTimeout(hideButtons, 3000);


    // Preload images
    const imageList = [];
    let loadedImages = 0;

    for (let i = 1; i <= totalImages; i++) {
        const img = new Image();
        img.src = `/slideshows/August2024/Aug_2024_${i.toString().padStart(2, '0')}.jpg`; <!-- <--------------------------<<<<<< Change to the proper location and names of the pictures up to the $.-->
        img.onload = function() {
            loadedImages++;
            const progressPercentage = Math.floor((loadedImages / totalImages) * 100);
            $('#progress-bar').css('width', `${progressPercentage}%`);
            $('#progress-text').text(`${progressPercentage}%`);
            if (loadedImages === totalImages) {
                document.getElementById('loading-screen').style.display = 'none';
                startSlideshow();
                showImage();
            }
        };
        imageList.push(img);
    }

    function updateCounter() {
        document.getElementById('counter').innerText = `${currentImage} / ${totalImages}`;
    }

    function showImage() {
        imgElement.src = imageList[currentImage - 1].src;
        imgElement.onload = () => {
            panzoom.reset();
        };
        updateCounter();
    }

    function goForward() {
        currentImage = (currentImage % totalImages) + 1;
        showImage();
        resetSlideshowInterval();
    }

    function goBack() {
        currentImage = (currentImage - 2 + totalImages) % totalImages + 1;
        showImage();
        resetSlideshowInterval();
    }

    function goToPreviousPage() {
        history.go(-1);
    }

    function togglePause() {
        isPaused = !isPaused;
        document.getElementById('pause').innerText = isPaused ? 'Play' : 'Pause';
        if (isPaused) {
            clearInterval(slideshowInterval);
        } else {
            startSlideshow();
        }
    }

    function restart() {
        isPaused = false;
        currentImage = 1;
        showImage();
        document.getElementById('pause').innerText = 'Pause';
        resetSlideshowInterval();
    }

    function startSlideshow() {
        slideshowInterval = setInterval(function () {
            if (!isPaused) {
                goForward();
            }
        }, intervalTime);
    }

    function resetSlideshowInterval() {
        clearInterval(slideshowInterval);
        if (!isPaused) {
            startSlideshow();
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        panzoom = Panzoom(imgElement, {
            maxScale: 10, // Increased maxScale to allow further zoom in
            minScale: 1,
            contain: 'outside',
            step: 0.5
        });

        imgElement.parentElement.addEventListener('wheel', panzoom.zoomWithWheel);

      
        document.addEventListener('keydown', function (e) {
            if (e.target.tagName.toLowerCase() !== 'input') {
                switch (e.which) {
                    case 32:
                        togglePause();
                        break;
                    case 37:
                        goBack();
                        break;
                    case 39:
                        goForward();
                        break;
                    case 38:
                        panzoom.zoomIn(1.5);  // Adjust this zoom factor to change the zoom in step size
                        break;
                    case 40:
                        panzoom.zoomOut(1.5); // Adjust this zoom factor to change the zoom out step size
                        break;
                    default:
                        return;
                }
                e.preventDefault();
            }
        });

        document.addEventListener('mousedown', function (e) {
            if (e.target === imgElement) {
                e.preventDefault();
            }
        });
    });
</script>

</body>
</html>




### Guidelines

- [X] I have read and understood this category's [guidelines](https://github.com/orgs/community/discussions/51384) before making this post.

JonathanPJL · 2024-09-10T17:58:10Z

JonathanPJL Sep 10, 2024
Author

Thank you for responding! I just have a few more questions with what you gave me...
In my original script, I had this function:

function showImage() {
imgElement.src = imageList[currentImage - 1].src;
imgElement.onload = () => {
panzoom.reset();
};
updateCounter();
}

You gave me this function:

function showImage() {
fadeInImage();
updateCounter();
}

Do I replace my original with yours? If so, what happens to this part?

imgElement.onload = () => {
panzoom.reset();

I did notice that the imgElement.src = imageList[currentImage - 1].src; is in the function fadeInImage that you gave me, but what happens to this part of the original function showImage ? Will my slideshow still work without it?

Thank you for helping me! I very much appreciate it! I'm glad someone took the time to find my problem!

EDIT:
I just did that anyway, but what I wanted was not made... It is more of a bump between images now on the slideshow, and not a smooth fade from one to the other...
If you would like to see the slideshow, it is publicly available on the website I am dealing with. By you seeing it might give you an idea of what needs to be fixed. Thank you for your time!
Here is the slideshow page: (depending on your internet speed, there are a lot of pictures to load, so it might take a while...)
https://minorseminary.org/slideshows/August2024/August2024.html

JonathanPJL · 2024-09-12T17:03:43Z

JonathanPJL Sep 12, 2024
Author

Thank you, once again for answering! The problem, however, is still not fixed, and I messed things up in the process. So I reverted the code to its original working position. Do you know if there is a plugin that works for smooth fade transitions from picture to picture that we can add to my original code? And if so, how do I go about doing that without it messing up or conflicting with my existing Panzoom plugins and other logic?
Thank you so much for helping me! I do appreciate someone who keeps answering back, even though I may be a pain in the neck to work with! :)

JonathanPJL · 2024-09-16T16:10:29Z

JonathanPJL Sep 16, 2024
Author

Thanks a million! The fading works now! However, the code you gave me seems to have messed up all other customization that I had originally had... like the zoom functions are gone, the buttons are gone, and keyboard functionality has been lost... I'm not sure what happened, and if you're up to it, could you fix that? I hate to keep asking you so much, but I am an amateur with this, and don't really know what to do...
You have been helping me a lot, though, and I do appreciate it! We are so close!! Now something else is messed up though...
If you want reference, I put the change on the website, so you can see what happened...
https://minorseminary.org/slideshows/August2024/August2024.html

JonathanPJL · 2024-09-17T15:40:59Z

JonathanPJL Sep 17, 2024
Author

Hmm... well, that's an option, but I am wondering if maybe you could just remake the slideshow for me, the way you seem fit, that would include the fading, but also, forward and backward buttons, zooming functions, pause and play buttons, a return arrow, restart button, and picture counter on the top... just like what I had before, except compatible with the fading of pictures, etc. Also, don't forget the keyboard and mouse functionality that I had before... and also the preloading screen, so that the pictures all load before being shown.
I have reverted the website page back to what it was before, so, if you would like reference again, here is the link again: https://minorseminary.org/slideshows/August2024/August2024.html
Is this too much to ask? I hope I am not overstepping my bounds...
Thank you once again for all your help! :)

This comment was marked as off-topic.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

I need help integrating a fade effect between pictures on my slideshow script. #138074

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 8 replies

This comment was marked as off-topic.

{{title}}

{{editor}}'s edit

{{editor}}'s edit

This comment was marked as off-topic.

{{title}}

This comment was marked as off-topic.

This comment was marked as off-topic.

{{title}}

This comment was marked as off-topic.

{{title}}

This comment was marked as off-topic.

Select a reply

GitHub Community

I need help integrating a fade effect between pictures on my slideshow script. #138074

JonathanPJL Sep 7, 2024

Body

Replies: 3 comments · 8 replies

This comment was marked as off-topic.

JonathanPJL Sep 10, 2024 Author

This comment was marked as off-topic.

JonathanPJL Sep 12, 2024 Author

This comment was marked as off-topic.

This comment was marked as off-topic.

JonathanPJL Sep 16, 2024 Author

This comment was marked as off-topic.

JonathanPJL Sep 17, 2024 Author

This comment was marked as off-topic.

JonathanPJL
Sep 7, 2024

Replies: 3 comments 8 replies

JonathanPJL Sep 10, 2024
Author

JonathanPJL Sep 12, 2024
Author

JonathanPJL Sep 16, 2024
Author

JonathanPJL Sep 17, 2024
Author