Fancybox: Guia Definitivo – Imagens, Vídeos, iFrames e Conteúdo Customizado

Fancybox é uma biblioteca leve de JavaScript/jQuery usada para exibir imagens, vídeos, iFrames e qualquer conteúdo HTML dentro de uma sobreposição modal com navegação elegante. Mesmo sendo simples, é cheia de recursos úteis.

---

Instalação

CDN (recomendado para testes e projetos rápidos)

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css" />

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>

Obs: O Fancybox v5 não precisa mais de jQuery.

---

Exibindo uma imagem

HTML

<a data-fancybox="gallery" href="img/foto1.jpg">
  <img src="img/thumb1.jpg" alt="Miniatura">
</a>

data-fancybox="gallery" agrupa as imagens com navegação entre elas.

---

Galeria de imagens

<a data-fancybox="galeria" href="img/foto1.jpg"><img src="img/thumb1.jpg"></a>
<a data-fancybox="galeria" href="img/foto2.jpg"><img src="img/thumb2.jpg"></a>
<a data-fancybox="galeria" href="img/foto3.jpg"><img src="img/thumb3.jpg"></a>

Basta manter o mesmo valor em data-fancybox.

---

Vídeo do YouTube ou Vimeo

<a data-fancybox href="https://www.youtube.com/watch?v=4Z1rYq5kBv0">Assistir vídeo</a>

Ele detecta o domínio automaticamente e carrega o player embutido.

---

iFrame (ex: um site ou página HTML)

<a data-fancybox data-type="iframe" data-src="https://devdata.com.br/exemplo.html" href="javascript:;">
  Abrir conteúdo externo
</a>

Usa data-type="iframe" e data-src.

---

Conteúdo HTML customizado

HTML oculto

<div style="display: none;" id="conteudo-custom">
  <h2>Conteúdo interno</h2>
  <p>Você pode colocar qualquer HTML aqui dentro.</p>
</div>

Disparador

<a data-fancybox data-src="#conteudo-custom" href="javascript:;">
  Abrir modal customizado
</a>

---

Configurações adicionais (opcional)

<script>
  Fancybox.bind("[data-fancybox]", {
    Thumbs: false,
    Toolbar: {
      display: [
        "zoom",
        "close",
      ],
    },
    animated: false,
    dragToClose: false,
  });
</script>

Você pode customizar quase tudo: botões, animações, thumbs, loop, etc.

---

Eventos JS

Fancybox.bind("[data-fancybox]", {
  on: {
    init: (fancybox) => {
      console.log("Iniciado", fancybox);
    },
    close: (fancybox) => {
      console.log("Fechado", fancybox);
    },
  }
});

---

CSS Customizado (exemplo básico)

.fancybox__container {
  background: rgba(0,0,0,0.95);
}

---

Conclusão

Mesmo sendo uma lib aparentemente simples, o Fancybox resolve com elegância a exibição de mídia no front-end. É leve, versátil e tem suporte robusto a imagens, vídeos, HTML e navegação entre elementos agrupados.