Széchenyi logo + Toggle funkció

szechenyicode

// másold be a kódot egy snippet tárolására alkalmas bővítménybe. 
// FluentSnippets esetében válaszd a Content (php + html) opciót és a teljes kódot másold be , hogy hol fusson "Where to run" válaszd a "Site Wide Footer" opciót
// cseréld ki a képet, a saját weboldaladra feltöltött médiatáras kép linkjével
// ezt cseréld ki a kódban: "<img id="fixedImage" src="http://sajatweboldalam.hu/wp-content/uploads/2024/05/infoblokk-jobb-also-sarokban.png" alt="Szechenyi logo">"
// a kód alsó részében (script részben) van egy átirányítási opció ha a képre kattintanak, kommenteld ki, vagy töröld ha nincs rá szükséged.
// localstorage ba tárolja a kód, ha el van rejtve, vagy nincs a logó, így nem nyitja ki minden oldal újratöltődéskor.

<div id="imageContainer">
    <button id="toggleButton">
        <svg id="chevronIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up">
            <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
    </button>
    <img id="fixedImage" src="http://sajatweboldalam.hu/wp-content/uploads/2024/05/infoblokk-jobb-also-sarokban.png" alt="Szechenyi logo">
</div>

<style>
#imageContainer {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 9;
    visibility: hidden; /* Initially hidden */
}

#fixedImage {
    max-width: 200px; /* Kép méret állítsd tetszőlegesre*/
    transition: transform 0.5s ease;
    cursor: pointer;
}

#toggleButton {
    background-color: transparent;
    border: 2px solid #007BFF;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    bottom: calc(100% + 10px); 
    z-index: 9;
    transition: transform 0.5s ease;
}

#toggleButton svg {
    width: 24px;
    height: 24px;
    stroke: black;
}

#toggleButton.rotated svg {
    transform: rotate(180deg);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const imageContainer = document.getElementById('imageContainer');
    const toggleButton = document.getElementById('toggleButton');
    const fixedImage = document.getElementById('fixedImage');
    let isHidden = localStorage.getItem('imageHidden') === 'true';

    const setInitialVisibility = () => {
        if (isHidden) {
            fixedImage.style.transition = 'none';
            toggleButton.style.transition = 'none';
            fixedImage.style.transform = 'translateY(100%)';
            toggleButton.style.transform = 'translateY(100px)';
            toggleButton.classList.add('rotated');
        } else {
            fixedImage.style.transition = 'none';
            toggleButton.style.transition = 'none';
            fixedImage.style.transform = 'translateY(0)';
            toggleButton.style.transform = 'translateY(0)';
            toggleButton.classList.remove('rotated');
        }


        setTimeout(() => {
            fixedImage.style.transition = 'transform 0.5s ease';
            toggleButton.style.transition = 'transform 0.5s ease';
            imageContainer.style.visibility = 'visible'; 
        }, 100);
    };

    const updateVisibility = () => {
        if (isHidden) {
            fixedImage.style.transform = 'translateY(100%)';
            toggleButton.style.transform = 'translateY(100px)'; 
        } else {
            fixedImage.style.transform = 'translateY(0)';
            toggleButton.style.transform = 'translateY(0)';
        }
        toggleButton.classList.toggle('rotated', isHidden);
    };

    toggleButton.addEventListener('click', () => {
        isHidden = !isHidden;
        localStorage.setItem('imageHidden', isHidden);
        updateVisibility();
    });

    fixedImage.addEventListener('click', () => {
        // cseréld ki az url ha azt szeretnéd hogy a képre kattintva átirányítsa a látogatót másik oldalra
        window.location.href = 'http://example.com';
    });

    setInitialVisibility();
});
</script>