Как сделать общий zoom-slider для нескольких ZeroBlock в Tilda

<script>
(function() {
    'use strict';
    
    const ZOOM_BLOCK_CLASSES = ['uc-zoom-block'];
    const GROUP_ID = 'main-zoom-group';
    
    if (document.readyState === 'complete') {
        initCustomZoom();
    } else {
        window.addEventListener('load', initCustomZoom);
    }
    
    function initCustomZoom() {
        setTimeout(() => {
            const proxyWrapper = createProxyWrapper(GROUP_ID);
            const imageMap = {};
            let globalIndex = 0;
          
            ZOOM_BLOCK_CLASSES.forEach(blockClass => {
                const blocks = document.querySelectorAll(`.${blockClass}`);
                
                blocks.forEach(block => {
                    const zoomables = block.querySelectorAll('.t-zoomable[data-zoomable="yes"]');
                    
                    zoomables.forEach(el => {
                        const imgUrl = el.getAttribute('data-img-zoom-url');
                        if (!imgUrl) return;
                        
            
                        imageMap[globalIndex] = imgUrl;

                        el.classList.remove('t-zoomable');
                        el.removeAttribute('data-zoomable');
                        el.removeAttribute('data-img-zoom-url');
                        
                        el.classList.add('t-custom-zoom');
                        el.setAttribute('data-custom-zoom-group', GROUP_ID);
                        el.setAttribute('data-custom-zoom-index', globalIndex);
                        
                        const proxy = createProxyElement(globalIndex, imgUrl, el);
                        proxyWrapper.appendChild(proxy);
                        
                        globalIndex++;
                    });
                });
            });
            

            if (globalIndex > 0 && !proxyWrapper.parentNode) {
                const firstBlock = document.querySelector(
                    ZOOM_BLOCK_CLASSES.map(c => `.${c}`).join(', ')
                );
                if (firstBlock) {
                    const artboard = firstBlock.querySelector('.t396__artboard');
                    const target = artboard || firstBlock;
                    target.appendChild(proxyWrapper);
                }
            }

            document.addEventListener('click', function(e) {
                const clicked = e.target.closest('.t-custom-zoom');
                if (!clicked) return;
                
                const group = clicked.getAttribute('data-custom-zoom-group');
                const index = clicked.getAttribute('data-custom-zoom-index');
                
                if (group !== GROUP_ID || index === null) return;
                
                e.preventDefault();
                e.stopPropagation();
                
                const proxy = proxyWrapper.querySelector(
                    `.t-zoomable[data-custom-zoom-index="${index}"]`
                );
                
                if (proxy) {
                    setTimeout(() => {
                        if (typeof proxy.onclick === 'function') {
                            proxy.onclick.call(proxy);
                        } else {
                            proxy.dispatchEvent(new MouseEvent('click', {
                                bubbles: true,
                                cancelable: true,
                                view: window
                            }));
                        }
                    }, 10);
                }
            });
            
        }, 100);
    }
    
    function createProxyWrapper(groupId) {
        const wrapper = document.createElement('div');
        wrapper.className = 'custom-zoom-wrapper';
        wrapper.setAttribute('data-group', groupId);
        wrapper.style.cssText = 'display:none !important; position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; pointer-events:none;';
        return wrapper;
    }
    
    function createProxyElement(index, imgUrl, sourceEl) {
        const proxy = sourceEl.cloneNode(false);
        proxy.classList.remove('t-custom-zoom');
        proxy.classList.add('t-zoomable');
        proxy.setAttribute('data-zoomable', 'yes');
        proxy.setAttribute('data-img-zoom-url', imgUrl);
        proxy.setAttribute('data-custom-zoom-index', index);
        proxy.removeAttribute('data-custom-zoom-group');
        
        if (proxy.tagName.toLowerCase() === 'div' && sourceEl.style.backgroundImage) {
            proxy.style.backgroundImage = sourceEl.style.backgroundImage;
        }
        return proxy;
    }
    
})();
</script>

<style>
.t-custom-zoom {
    cursor: zoom-in;
}    
</style>