{"id":1056,"date":"2026-09-26T18:31:57","date_gmt":"2026-09-26T18:31:57","guid":{"rendered":"https:\/\/sgtiranni.com\/?page_id=1056"},"modified":"2026-09-26T18:47:55","modified_gmt":"2026-09-26T18:47:55","slug":"lizhuan-stone-town","status":"publish","type":"page","link":"https:\/\/sgtiranni.com\/en\/lizhuan-stone-town\/","title":{"rendered":"Lizhuan Stone Town"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1056\" class=\"elementor elementor-1056\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bee994c e-flex e-con-boxed e-con e-parent\" data-id=\"bee994c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0aec318 elementor-widget elementor-widget-html\" data-id=\"0aec318\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================\r\n   STILI GRIGLIA E GALLERIA\r\n   ========================================= *\/\r\n.vb-project-gallery {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    grid-auto-rows: 250px;\r\n    gap: 15px;\r\n    width: 100%;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    overflow: hidden; \/* Evita scroll orizzontale durante l'animazione *\/\r\n}\r\n\r\n.vb-gallery-item {\r\n    position: relative;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    border-radius: 4px;\r\n    \r\n    \/* Setup per l'animazione in entrata *\/\r\n    opacity: 0;\r\n    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;\r\n}\r\n\r\n\/* Le immagini dispari partono da sinistra, le pari da destra *\/\r\n.vb-gallery-item:nth-child(odd) {\r\n    transform: translateX(-50px);\r\n}\r\n.vb-gallery-item:nth-child(even) {\r\n    transform: translateX(50px);\r\n}\r\n\r\n\/* Classe aggiunta dal JS quando l'elemento entra nella visuale *\/\r\n.vb-gallery-item.vb-animate-in {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n.vb-gallery-item img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;\r\n}\r\n\r\n\/* Effetto Hover: Leggero Zoom, oscuramento e comparsa bottone *\/\r\n.vb-project-gallery:hover .vb-gallery-item:not(:hover) img {\r\n    opacity: 0.7;\r\n}\r\n\r\n.vb-gallery-item:hover img {\r\n    transform: scale(1.08);\r\n}\r\n\r\n\/* =========================================\r\n   PULSANTE \"ESPLORA\" AL PASSAGGIO DEL MOUSE\r\n   ========================================= *\/\r\n.vb-hover-btn {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(0.8);\r\n    background-color: rgba(255, 255, 255, 0.95);\r\n    color: #111;\r\n    padding: 12px 24px;\r\n    border-radius: 50px; \/* Cerchio schiacciato a pillola *\/\r\n    font-family: sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    opacity: 0;\r\n    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n    pointer-events: none; \/* Impedisce che blocchi il click sull'immagine *\/\r\n    z-index: 2;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.15);\r\n}\r\n\r\n.vb-gallery-item:hover .vb-hover-btn {\r\n    opacity: 1;\r\n    transform: translate(-50%, -50%) scale(1);\r\n}\r\n\r\n\/* Classi per rendere la griglia asimmetrica (Masonry Style) *\/\r\n.vb-span-2 {\r\n    grid-column: span 2;\r\n    grid-row: span 2;\r\n}\r\n\r\n.vb-span-wide {\r\n    grid-column: span 2;\r\n    grid-row: span 1;\r\n}\r\n\r\n\/* =========================================\r\n   LIGHTBOX E ZOOM (A SCHERMO INTERO)\r\n   ========================================= *\/\r\n.vb-lightbox {\r\n    display: none;\r\n    position: fixed;\r\n    top: 0; \r\n    left: 0; \r\n    width: 100vw; \r\n    height: 100vh;\r\n    background-color: rgba(15, 15, 15, 0.95);\r\n    z-index: 999999;\r\n    justify-content: center;\r\n    align-items: center;\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n}\r\n\r\n.vb-lightbox.active {\r\n    display: flex;\r\n    opacity: 1;\r\n}\r\n\r\n.vb-lightbox img {\r\n    max-width: 90vw;\r\n    max-height: 90vh;\r\n    object-fit: contain;\r\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n    cursor: zoom-in;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n}\r\n\r\n.vb-lightbox img.zoomed {\r\n    transform: scale(1.8);\r\n    cursor: zoom-out;\r\n}\r\n\r\n.vb-lightbox-close {\r\n    position: absolute;\r\n    top: 20px; \r\n    right: 35px;\r\n    color: #ffffff;\r\n    font-size: 45px;\r\n    font-weight: 300;\r\n    cursor: pointer;\r\n    z-index: 1000000;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.vb-lightbox-close:hover {\r\n    color: #cccccc;\r\n}\r\n\r\n\/* =========================================\r\n   ADATTAMENTO PER CELLULARI (RESPONSIVE)\r\n   ========================================= *\/\r\n@media (max-width: 768px) {\r\n    .vb-project-gallery {\r\n        grid-template-columns: 1fr;\r\n        grid-auto-rows: 300px;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .vb-span-2, .vb-span-wide {\r\n        grid-column: span 1;\r\n        grid-row: span 1;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- =========================================\r\n     STRUTTURA GALLERIA HTML\r\n     ========================================= -->\r\n<div class=\"vb-project-gallery\">\r\n\r\n    <!-- 1. IMMAGINE GRANDE (vb-span-2) -->\r\n    <div class=\"vb-gallery-item vb-span-2\" onclick=\"vbOpenLightbox(this)\">\r\n        <img decoding=\"async\" src=\"https:\/\/sgtiranni.com\/wp-content\/uploads\/2026\/08\/2modLizhuan-Stone-Town.jpg\" alt=\"Vista principale progetto\">\r\n        <div class=\"vb-hover-btn\">Esplora \ud83d\udd0d<\/div>\r\n    <\/div>\r\n\t\r\n\t<!-- 2. IMMAGINE GRANDE (vb-span-2) -->\r\n    <div class=\"vb-gallery-item vb-span-2\" onclick=\"vbOpenLightbox(this)\">\r\n        <img decoding=\"async\" src=\"https:\/\/sgtiranni.com\/wp-content\/uploads\/2026\/09\/1mod-Lizhuan-Stone-Town_migliorata.png\" alt=\"Vista principale progetto\">\r\n        <div class=\"vb-hover-btn\">Esplora \ud83d\udd0d<\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- =========================================\r\n     CONTENITORE LIGHTBOX (Nascosto di default)\r\n     ========================================= -->\r\n<div class=\"vb-lightbox\" id=\"vb-lightbox\">\r\n    <span class=\"vb-lightbox-close\" onclick=\"vbCloseLightbox()\">&times;<\/span>\r\n    <img decoding=\"async\" src=\"\" id=\"vb-lightbox-img\" onclick=\"vbToggleZoom(this)\" alt=\"Visualizzazione a schermo intero\">\r\n<\/div>\r\n\r\n<!-- =========================================\r\n     JAVASCRIPT PER LIGHTBOX, ZOOM E ANIMAZIONE\r\n     ========================================= -->\r\n<script>\r\n    \/\/ --- Lighbox e Zoom Logic ---\r\n    function vbOpenLightbox(element) {\r\n        const imgSrc = element.querySelector('img').src; \r\n        const lightbox = document.getElementById('vb-lightbox');\r\n        const lightboxImg = document.getElementById('vb-lightbox-img');\r\n        \r\n        lightboxImg.src = imgSrc; \r\n        lightboxImg.classList.remove('zoomed'); \r\n        \r\n        lightbox.style.display = 'flex';\r\n        setTimeout(() => {\r\n            lightbox.classList.add('active');\r\n        }, 10);\r\n    }\r\n\r\n    function vbCloseLightbox() {\r\n        const lightbox = document.getElementById('vb-lightbox');\r\n        lightbox.classList.remove('active');\r\n        \r\n        setTimeout(() => {\r\n            lightbox.style.display = 'none';\r\n        }, 300);\r\n    }\r\n\r\n    function vbToggleZoom(imgElement) {\r\n        imgElement.classList.toggle('zoomed');\r\n    }\r\n\r\n    document.getElementById('vb-lightbox').addEventListener('click', function(e) {\r\n        if (e.target === this) {\r\n            vbCloseLightbox();\r\n        }\r\n    });\r\n\r\n    document.addEventListener('keydown', function(e) {\r\n        if (e.key === 'Escape') {\r\n            const lightbox = document.getElementById('vb-lightbox');\r\n            if (lightbox.classList.contains('active')) {\r\n                vbCloseLightbox();\r\n            }\r\n        }\r\n    });\r\n\r\n    \/\/ --- Animazione Scroll\/Caricamento Logic ---\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        const galleryItems = document.querySelectorAll('.vb-gallery-item');\r\n        \r\n        \/\/ Configura l'osservatore per far partire l'animazione quando l'elemento entra nello schermo\r\n        const observerOptions = {\r\n            root: null,\r\n            rootMargin: '0px',\r\n            threshold: 0.15 \/\/ Si attiva quando il 15% dell'immagine \u00e8 visibile\r\n        };\r\n\r\n        const observer = new IntersectionObserver((entries, observer) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    \/\/ Aggiunge un piccolo ritardo sfalsato in base all'ordine per un effetto a cascata\r\n                    const index = Array.from(galleryItems).indexOf(entry.target);\r\n                    setTimeout(() => {\r\n                        entry.target.classList.add('vb-animate-in');\r\n                    }, index * 100); \/\/ 100ms di scarto tra l'ingresso di ogni immagine\r\n                    \r\n                    observer.unobserve(entry.target); \/\/ Ferma l'osservazione dopo l'animazione\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        galleryItems.forEach(item => {\r\n            observer.observe(item);\r\n        });\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Esplora \ud83d\udd0d Esplora \ud83d\udd0d &times;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1056","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/1056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/comments?post=1056"}],"version-history":[{"count":13,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/1056\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/pages\/1056\/revisions\/1088"}],"wp:attachment":[{"href":"https:\/\/sgtiranni.com\/en\/wp-json\/wp\/v2\/media?parent=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}