Every frame.

(function(){ // DO NOT add an early-return guard here. The live site is served by a hydrating // framework that REPLACES this widget's DOM after first paint, discarding every // listener bound to the server-rendered nodes. The bootstrap img is re-created // and fires again, so this code must be safe to run repeatedly and must always // rebind to whichever nodes exist at that moment. Each init below is idempotent. function initLd(){ if(document.getElementById("psm-ld-studio")){return} var frames=document.querySelectorAll(".psm-frame"); if(!frames.length){return} var imgs=[]; frames.forEach(function(a){ imgs.push({"@type":"ImageObject","contentUrl":a.getAttribute("href"),"caption":a.getAttribute("data-cap")||""}); }); var ld={ "@context":"https://schema.org", "@type":"ImageGallery", "name":"Podcast Studio Manchester — Studio Gallery", "url":"https://podcaststudiomanchester.uk/studio/", "description":"Photographs of the Podcast Studio Manchester recording space — four dressed sets, RGB lighting, 4K multi-cam and broadcast audio kit.", "image":imgs, "isPartOf":{"@type":"WebSite","name":"Podcast Studio Manchester","url":"https://podcaststudiomanchester.uk/"} }; var sj=document.createElement("script"); sj.id="psm-ld-studio"; sj.type="application/ld+json"; sj.textContent=JSON.stringify(ld); document.head.appendChild(sj); } function initReveal(){ if(!("IntersectionObserver" in window)){return} var els=document.querySelectorAll(".psm-rv"); if(!els.length){return} var io=new IntersectionObserver(function(entries){entries.forEach(function(e){ if(e.isIntersecting){e.target.classList.add("in");io.unobserve(e.target)} })},{threshold:.08}); els.forEach(function(el){ if(el.getAttribute("data-psm-rv")){return} el.setAttribute("data-psm-rv","1"); el.classList.add("will-anim"); io.observe(el); }); } // lightbox — progressive: without JS every frame is a plain link to the full image function initLightbox(){ var box=document.getElementById("psm-lb"); if(!box){return} if(box.getAttribute("data-psm-bound")){return} var frames=document.querySelectorAll(".psm-frame"); var im=document.getElementById("psm-lb-img"); var cap=document.getElementById("psm-lb-cap"); var cnt=document.getElementById("psm-lb-count"); var bClose=document.getElementById("psm-lb-close"); var bPrev=document.getElementById("psm-lb-prev"); var bNext=document.getElementById("psm-lb-next"); if(!frames.length||!im||!cap||!cnt||!bClose||!bPrev||!bNext){return} box.setAttribute("data-psm-bound","1"); var i=0, n=frames.length, lastFocus=null; function pad(v){ return ("0"+v).slice(-2) } function show(k){ i=(k+n)%n; var a=frames[i]; var pic=a.querySelector("img"); im.src=a.getAttribute("href"); im.alt=pic?pic.getAttribute("alt"):""; cap.textContent=a.getAttribute("data-cap")||""; cnt.textContent=pad(i+1)+" / "+pad(n); } function open(k){ lastFocus=document.activeElement; show(k); box.removeAttribute("hidden"); document.documentElement.style.overflow="hidden"; bClose.focus(); } function close(){ box.setAttribute("hidden",""); document.documentElement.style.overflow=""; if(lastFocus&&lastFocus.focus){ lastFocus.focus() } } frames.forEach(function(a,idx){ a.addEventListener("click",function(ev){ ev.preventDefault(); open(idx) }); }); bClose.addEventListener("click",close); bPrev.addEventListener("click",function(){ show(i-1) }); bNext.addEventListener("click",function(){ show(i+1) }); box.addEventListener("click",function(ev){ if(ev.target===box){ close() } }); // one document-level key handler for the life of the page, pointed at whichever // lightbox instance is current — avoids stacking listeners on every rebind window.__psmLb={ isOpen:function(){ return !box.hasAttribute("hidden") }, next:function(){ show(i+1) }, prev:function(){ show(i-1) }, close:close }; if(!window.__psmLbKeys){ window.__psmLbKeys=1; document.addEventListener("keydown",function(ev){ var lb=window.__psmLb; if(!lb||!lb.isOpen()){return} if(ev.key==="Escape"){ lb.close() } if(ev.key==="ArrowRight"){ lb.next() } if(ev.key==="ArrowLeft"){ lb.prev() } }); } } function boot(){ initLd(); initReveal(); initLightbox(); } boot(); if(document.readyState!=="complete"){ window.addEventListener("load",boot) } // hydration can swap this widget in after we run — re-check for ~6s, then stop. var tries=0; var iv=setInterval(function(){ boot(); if(++tries>20){clearInterval(iv)} },300); })();