Snippet JavaScript untuk menampilkan gambar yang floating yang diklik akan tampil penuh dan memiliki url

Aku punya snippet menarik untuk menampilkan gambar yang floating (mengapung) yang jika diklik akan muncul gambar ukuran penuh dan ketika diklik lagi akan mengarah ke url yang diset di kode JS.

Berikut snippetnya:

<script>
(function() {
    // Configuration
    const images = [
        { thumb: 'img1.jpg', full: 'img1-full.jpg', url: 'https://example.com/link1' },
        { thumb: 'photo2.jpg', full: 'photo2-full.jpg', url: 'https://example.com/link2' }
    ];
    
    // Select random image
    const randomImage = images[Math.floor(Math.random() * images.length)];
    
    // Create small floating container
    const floatingContainer = document.createElement('div');
    floatingContainer.innerHTML = `
        <div style="position:fixed;bottom:20px;left:20px;z-index:9999;cursor:pointer;transition:all 0.3s ease;">
            <img src="${randomImage.thumb}" style="width:80px;height:80px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.3);">
            <button style="position:absolute;top:-8px;right:-8px;background:white;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.3);border:none;">×</button>
        </div>
    `;
    document.body.appendChild(floatingContainer);
    
    // Create fullscreen container (hidden initially)
    const fullscreenContainer = document.createElement('div');
    fullscreenContainer.innerHTML = `
        <div style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;z-index:10000;">
            <img src="${randomImage.full}" style="max-width:90%;max-height:90%;cursor:pointer;">
            <button style="position:absolute;top:20px;right:20px;background:white;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:bold;cursor:pointer;border:none;">×</button>
        </div>
    `;
    document.body.appendChild(fullscreenContainer);
    
    // Get references to elements
    const floatingDiv = floatingContainer.firstChild;
    const floatingCloseBtn = floatingDiv.querySelector('button');
    const fullscreenDiv = fullscreenContainer.firstChild;
    const fullscreenImg = fullscreenDiv.querySelector('img');
    const fullscreenCloseBtn = fullscreenDiv.querySelector('button');
    
    // Event handlers
    floatingDiv.addEventListener('click', (e) => {
        if (e.target !== floatingCloseBtn) {
            fullscreenDiv.style.display = 'flex';
        }
    });
    
    floatingCloseBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        floatingDiv.style.display = 'none';
    });
    
    fullscreenImg.addEventListener('click', () => {
        window.open(randomImage.url, '_blank');
    });
    
    fullscreenCloseBtn.addEventListener('click', () => {
        fullscreenDiv.style.display = 'none';
    });
})();
</script>