document.addEventListener("DOMContentLoaded",()=>{const e=document.querySelectorAll(".mlo-gallery-block");e.forEach(e=>{initFilterBar(e);initLightbox(e);initCarousel(e);initJustified(e);initMasonry(e)})});function initFilterBar(e){const t=e.querySelector(".mlo-filter-bar");if(!t)return;const l=e.querySelectorAll(".mlo-gallery-item");const i=e.getAttribute("data-animation")||"fade";const o=t.classList.contains("mlo-filter-dropdown")?"dropdown":"pills";const filterItems=t=>{let o=0;l.forEach(e=>{const l=e.getAttribute("data-cats")||"";const s=l.trim().split(/\s+/).filter(Boolean);const n=t==="all"||s.includes(String(t));if(n)o++;if(i==="none"){e.classList.toggle("mlo-item-hidden",!n)}else{if(n){e.classList.remove("mlo-item-hidden");setTimeout(()=>e.classList.remove("mlo-anim-hide"),10)}else{e.classList.add("mlo-anim-hide");setTimeout(()=>e.classList.add("mlo-item-hidden"),400)}}});const s=e.querySelector(".mlo-filter-empty-message");if(s){if(o===0){s.style.display="block"}else{s.style.display="none"}}setTimeout(()=>{if(e.classList.contains("mlo-gallery-layout-carousel")){updateCarouselVisually(e)}if(e.classList.contains("mlo-gallery-layout-justified")){initJustified(e)}},450)};if(o==="pills"){const e=t.querySelectorAll(".mlo-filter-btn");e.forEach(t=>{t.addEventListener("click",()=>{e.forEach(e=>e.classList.remove("active"));t.classList.add("active");filterItems(t.getAttribute("data-cat"))})})}else if(o==="dropdown"){const e=t.querySelector(".mlo-filter-select");e.addEventListener("change",e=>{filterItems(e.target.value)})}}function initLightbox(e){if(e.getAttribute("data-lightbox")!=="1")return;const t=e.querySelectorAll(".mlo-lightbox-trigger");const l=e.querySelector(".mlo-lightbox-overlay");if(!l)return;const i=l.querySelector(".mlo-lightbox-close");const o=l.querySelector(".mlo-lightbox-prev");const s=l.querySelector(".mlo-lightbox-next");const n=l.querySelector(".mlo-lightbox-img");const r=l.querySelector(".mlo-lightbox-caption");const a=l.querySelector(".mlo-lightbox-counter");let c=0;let d=[];const updateVisibleItems=()=>{d=Array.from(t).filter(e=>!e.closest(".mlo-gallery-item").classList.contains("mlo-item-hidden"))};const showImage=e=>{if(d.length===0)return;if(e<0)e=d.length-1;if(e>=d.length)e=0;c=e;const t=d[e];n.src=t.href;if(r){r.textContent=t.getAttribute("data-caption")||""}if(a){a.textContent=`${e+1} of ${d.length}`}};const handleKeydown=e=>{if(e.key==="Escape")closeLightbox();if(e.key==="ArrowLeft")showImage(c-1);if(e.key==="ArrowRight")showImage(c+1)};const openLightbox=()=>{l.classList.add("active");l.setAttribute("aria-hidden","false");document.body.classList.add("mlo-lightbox-open");document.addEventListener("keydown",handleKeydown)};const closeLightbox=()=>{l.classList.remove("active");l.setAttribute("aria-hidden","true");document.body.classList.remove("mlo-lightbox-open");document.removeEventListener("keydown",handleKeydown)};t.forEach(e=>{e.addEventListener("click",t=>{t.preventDefault();updateVisibleItems();c=d.indexOf(e);if(c===-1)c=0;showImage(c);openLightbox()})});if(i)i.addEventListener("click",closeLightbox);l.addEventListener("click",e=>{if(e.target===l||e.target.classList.contains("mlo-lightbox-inner")||e.target.classList.contains("mlo-lightbox-img-wrap")){closeLightbox()}});if(o)o.addEventListener("click",()=>showImage(c-1));if(s)s.addEventListener("click",()=>showImage(c+1))}function initCarousel(e){if(!e.classList.contains("mlo-gallery-layout-carousel"))return;const t=e.querySelector(".mlo-carousel-track");const l=e.querySelector(".mlo-carousel-prev");const i=e.querySelector(".mlo-carousel-next");const o=e.querySelector(".mlo-carousel-dots");if(!t)return;let s=Array.from(t.querySelectorAll(".mlo-carousel-slide"));let n=0;let r=parseInt(e.getAttribute("data-slides-visible"),10)||1;const a=e.getAttribute("data-autoplay")==="1";const c=parseInt(e.getAttribute("data-autoplay-speed"),10)||3e3;const d=parseInt(window.getComputedStyle(e).getPropertyValue("--mlo-gap"),10)||10;let f;if(s.length<=r){if(l)l.style.display="none";if(i)i.style.display="none";if(o)o.style.display="none";const e=t.parentElement.offsetWidth;const n=d*(s.length-1);const r=(e-n)/s.length;s.forEach(e=>{e.style.width=`${r}px`;e.style.flexShrink="0"});return}const updateVisibleCount=()=>{if(window.innerWidth<=480){return 1}else if(window.innerWidth<=768){return Math.min(2,r)}return r};let m=updateVisibleCount();e.style.setProperty("--mlo-slides-visible",m);const update=()=>{m=updateVisibleCount();e.style.setProperty("--mlo-slides-visible",m);const r=s.filter(e=>!e.classList.contains("mlo-item-hidden"));const a=Math.max(0,r.length-m);if(r.length<=m){if(l)l.style.display="none";if(i)i.style.display="none";if(o)o.style.display="none";const e=t.parentElement.offsetWidth;const n=d*(r.length-1);const a=r.length>0?(e-n)/r.length:0;s.forEach(e=>{if(!e.classList.contains("mlo-item-hidden")){e.style.width=`${a}px`;e.style.flexShrink="0"}});t.style.transform=`translateX(0)`;return}if(l)l.style.display="flex";if(i)i.style.display="flex";if(o)o.style.display="block";if(n>a)n=a;if(r.length>0){const e=t.parentElement.offsetWidth;const l=d*(m-1);const i=(e-l)/m;const o=(i+d)*n;t.style.transform=`translateX(-${o}px)`;s.forEach(e=>{e.style.width=`${i}px`})}else{t.style.transform=`translateX(0)`}if(o){const e=Math.max(1,r.length-m+1);o.innerHTML="";for(let t=0;t{n=t;update();resetAutoplay()});o.appendChild(e)}}if(l)l.style.opacity=n===0?"0.5":"1";if(i)i.style.opacity=n>=a?"0.5":"1"};window.addEventListener("resize",update);update();e.updateCarousel=update;if(l){l.addEventListener("click",()=>{if(n>0){n--;update();resetAutoplay()}})}if(i){i.addEventListener("click",()=>{const e=s.filter(e=>!e.classList.contains("mlo-item-hidden"));const t=Math.max(0,e.length-m);if(n{if(a){f=setInterval(()=>{const e=s.filter(e=>!e.classList.contains("mlo-item-hidden"));const t=Math.max(0,e.length-m);if(nclearInterval(f);const resetAutoplay=()=>{stopAutoplay();startAutoplay()};if(a){startAutoplay();e.addEventListener("mouseenter",stopAutoplay);e.addEventListener("mouseleave",startAutoplay)}}function updateCarouselVisually(e){if(e.updateCarousel)e.updateCarousel()}function initJustified(e){if(!e.classList.contains("mlo-gallery-layout-justified"))return;const performLayout=()=>{const t=e.querySelector(".mlo-gallery-grid");if(!t)return;const l=Array.from(t.querySelectorAll(".mlo-gallery-item:not(.mlo-item-hidden)"));if(l.length===0)return;const i=l.map(e=>new Promise(t=>{const l=e.querySelector("img");if(l&&l.complete&&l.naturalWidth){t()}else if(l){l.onload=()=>t();l.onerror=()=>t()}else{t()}}));Promise.all(i).then(()=>{const t=parseInt(window.getComputedStyle(e).getPropertyValue("--mlo-row-height"),10)||250;l.forEach(e=>{const l=e.querySelector("img");if(l&&l.naturalWidth&&l.naturalHeight){const i=l.naturalWidth/l.naturalHeight;const o=t*i;e.style.flexBasis=`${o}px`;e.style.flexGrow=`${i}`;e.style.flexShrink="1";e.style.height=`${t}px`;l.style.width="100%";l.style.height="100%";l.style.objectFit="cover"}})})};performLayout();if(!e._mloJustifiedResizeHandler){let t;const handler=()=>{clearTimeout(t);t=setTimeout(performLayout,250)};e._mloJustifiedResizeHandler=handler;window.addEventListener("resize",handler)}}function initMasonry(e){if(!e.classList.contains("mlo-gallery-layout-masonry"))return;const t=e.querySelector(".mlo-gallery-grid");if(!t)return;const l=Array.from(t.querySelectorAll(".mlo-gallery-item"));if(l.length===0)return;t.style.opacity="0";const i=l.map(e=>new Promise(t=>{const l=e.querySelector("img");if(l&&l.complete){t()}else if(l){l.onload=()=>t();l.onerror=()=>t()}else{t()}}));Promise.all(i).then(()=>{t.style.opacity="1"})} Pose Architecture | Attico Gallo - Pose Architecture Attico Gallo - Pose Architecture

Attico Gallo

Palermo · 2023 · Residential