Skip to content
Snippets Groups Projects
functions.js 1.86 KiB
Newer Older
  • Learn to ignore specific revisions
  • let slideNumber = 0;
    
    
    Silas Meister's avatar
    Silas Meister committed
    const newsImageSources = ['../img/nasa_news_1.jpg', '../img/nasa_news_2.jpg', '../img/nasa_news_3.jpg'];
    
    Silas Meister's avatar
    Silas Meister committed
    const newsImageSources = ['../img/nasa_news_1.jpg', '../img/nasa_news_2.jpg', '../img/nasa_news_3.jpg'];
    
    const newsTitles = ['Space Station', 'Earth', 'NASA Goddard'];
    const newsSubtitles = ['Expedition 48 Crew Lands Safely on Earth', 'NASA Announces Summer 2023 Hottest on Record', 'NASA\'s Webb Snaps Supersonic Outflow of Young Star'];
    
    
    Silas Meister's avatar
    Silas Meister committed
    document.addEventListener("DOMContentLoaded", function() {
        onload();
    });
    
    Silas Meister's avatar
    Silas Meister committed
    document.addEventListener("DOMContentLoaded", function() {
        onload();
    });
    
    
    function onload() {
        console.log("Page loaded");
    
        setInterval(slideImage, 30000);
    
    Silas Meister's avatar
    Silas Meister committed
    
        setHoverForOverlay();
    
    Silas Meister's avatar
    Silas Meister committed
    
        setHoverForOverlay();
    
    }
    
    function slideImage() {
        slideNumber = (slideNumber + 1) % 3;
    
        const slideImage = document.getElementById('slide-image');
    
        const slideContainer = document.getElementById('slide-container');
        const slideTitle = slideContainer.children[0];
        const slideSubtitle = slideContainer.children[1];
        
        let newsImageSource = newsImageSources[slideNumber];
        let newsTitle = newsTitles[slideNumber];
        let newsSubtitle = newsSubtitles[slideNumber];
    
        slideImage.src = newsImageSource;
        slideTitle.textContent = newsTitle;
        slideSubtitle.textContent = newsSubtitle;
    
    Silas Meister's avatar
    Silas Meister committed
    }
    
    function setHoverForOverlay() {
        let overlayDescription = document.querySelector('.overlay > .overlay-description');
    
        overlayDescription.addEventListener("mouseover", function() { hover(true); })
        overlayDescription.addEventListener("mouseout", function() { hover(false); })
    }
    
    function hover(hoverActivated) {
        let height = "";
    
        if (hoverActivated)
            height = "100%";
        else
            height = "auto";
    
        document.querySelectorAll(".overlay").forEach(function(element) {
            element.style.height = height;
        });