Widget:Maxgif

<script> (function(){

 var css =
 ".gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647}"+
 ".gx-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.86)}"+
 ".gx-modal{position:relative;display:flex;align-items:center;justify-content:center;pointer-events:none}"+
 ".gx-box{position:relative;display:inline-block;background:#000;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden;pointer-events:auto}"+
 ".gx-img{display:block;max-width:min(92vw,1200px);max-height:92vh;width:auto;height:auto}"+
 ".gx-close{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:#fff;font-size:22px;line-height:32px;text-align:center;cursor:pointer}"+
 ".gifbox{cursor:pointer;text-decoration:underline;color:#0645ad}"+
 ".gifbox:visited{color:#0b0080}"+
 ".gx-open{overflow:hidden!important}";
 var style=document.createElement("style");style.type="text/css";style.appendChild(document.createTextNode(css));document.head.appendChild(style);

 var overlay=document.createElement("div");
 overlay.className="gx-overlay";overlay.setAttribute("role","dialog");overlay.setAttribute("aria-modal","true");

overlay.innerHTML='

<button class="gx-close" type="button" aria-label="Fechar">×</button><img class="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer">

';

 document.body.appendChild(overlay);

 var backdrop=overlay.querySelector(".gx-backdrop");
 var box=overlay.querySelector(".gx-box");
 var img=overlay.querySelector(".gx-img");
 var closeBtn=overlay.querySelector(".gx-close");
 var lastActive=null;

 function openBox(url,altText){
   if(!url)return;
   lastActive=document.activeElement;
   document.body.classList.add("gx-open");
   img.removeAttribute("width");img.removeAttribute("height");
   img.src=url; img.alt=altText||"";
   overlay.style.display="flex";
   // garante centralização mesmo antes do load
   box.style.width="auto"; box.style.height="auto";
   // após carregar, não deixa “caixa maior que o necessário”
   if(img.complete){fit()} else {img.addEventListener("load",fit,{once:true});}
   closeBtn.focus();
 }

 function fit(){
   // nada de tamanhos fixos: a caixa segue a imagem escalada
   box.style.width="auto"; box.style.height="auto";
 }

 function closeBox(){
   overlay.style.display="none";
   document.body.classList.remove("gx-open");
   img.src=""; img.alt="";
   if(lastActive && lastActive.focus) lastActive.focus();
 }

 overlay.addEventListener("click",function(e){
   if(e.target===overlay||e.target===backdrop) closeBox();
 });
 closeBtn.addEventListener("click",closeBox);
 document.addEventListener("keydown",function(e){ if(e.key==="Escape") closeBox(); });

 document.addEventListener("click",function(e){
   var t=e.target;
   while(t && t!==document){
     if(t.classList && t.classList.contains("gifbox")) break;
     t=t.parentNode;
   }
   if(!t || t===document) return;
   e.preventDefault();
   var url=t.getAttribute("data-gif")||t.getAttribute("href");
   var alt=t.getAttribute("data-alt")||t.textContent.trim();
   if(!url) return;
   openBox(url,alt);
 },false);

})(); </script>