<script>
    document.addEventListener('DOMContentLoaded', function () {
        let scriptLoaded = false;

        function loadFancybox() {
            if (!scriptLoaded) {
                scriptLoaded = true;

                // Carica il CSS di Fancybox
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = '{{styles_dir}}/lib/fancybox.css';
                link.fetchpriority = 'low';
                document.head.appendChild(link);

                // Carica il JS di Fancybox
                const script = document.createElement('script');
                script.src = '{{scripts_dir}}/fancybox.umd.js';
                script.async = true;
                script.defer = true;
                script.fetchpriority = 'low';
                script.onload = function () {
                    // Inizializza Fancybox qui, dopo che lo script è stato caricato
                    if (typeof Fancybox !== 'undefined') {
                        Fancybox.bind("[data-fancybox-type], [data-fancybox]");
                    }
                };
                document.body.appendChild(script);
            }
        }

        function onScroll() {
            if (window.scrollY > 300) {;
                loadFancybox();
                window.removeEventListener('scroll', onScroll); // Rimuove il listener dopo il primo trigger
            }
        }

        window.addEventListener('scroll', onScroll);

        // Aggiunta di un timeout come fallback nel caso in cui non ci sia uno scroll
        //setTimeout(loadFancybox, 3000); // Carica lo script e il CSS dopo 2 secondi se non c'è scroll
    });
</script>