Como criar belas galerias de imagens com o Fancybox3 (tutorial)

A nova versão 3 do FancyBox está ainda mais fácil de usar.  FancyBox é um aclamando plugin jQuery que acabou virando uma biblioteca em função da sua popularidade. Você pode usar esta galeria tanto em web sites como em aplicativos baseados em HTML 5.

O FancyBox inclusive tem um site novo; acesse: http://fancyapps.com/fancybox/3/

Assim como toda boa biblioteca, podemos utilizar os endereços CDNs para adicioná-la a nossa página Web. FancyBox também precisa do jQuery para funcionar, então, os endereço CDNs são estes;

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>

Adicionando a nossa página web, temos então a seguinte estrutura;

<!DOCTYPE html>
<html lang="pt-br">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Galeria de imagens do meu site</title>
 <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>
</head>
<body>
   ... conteúdo do site aqui ...
</body>
</html>

Exemplo prático do uso do FancyBox.

Agora vem a parte mais legal, a criação da galeria. Para que o FanceBox funcione basta usar a seguinte sintaxe;

<a data-fancybox="gallery" href="nome-do-arquivo-grande.jpg"><img src="nome-do-arquivo-miniatura.jpg"></a>

Note que ele usa dois arquivos, sendo que um deles será a miniatura e outro será o arquivo de tamanho normal. Então vamos separar as duas imagens. Você pode utilizar algum editor de imagens para criar as miniaturas;

Perceba então que temos duas imagens, sendo uma delas a miniatura. A miniatura tem um tamanho de 186×186 e a imagem normal tem um tamanho de 614×614.

Agora vamos programar o nosso HTML, o código ficaria da seguinte forma;

<a data-fancybox="gallery" href="imagens/gato-01-miniatura.jpg"><img src="imagens/gato-01.jpg"></a>

O resultado é este mostrado no GIF, clique para executar o GIF.

Criando a galeria com várias imagens.

Podemos acrescentar várias imagens, colocando uma ao lado da outra ou organizando por colunas. Por exemplo;

<a data-fancybox="gallery" href="imagens/gato-01.jpg"><img src="imagens/gato-01-miniatura.jpg"></a>
<a data-fancybox="gallery" href="imagens/gato-02.jpg"><img src="imagens/gato-02-miniatura.jpg"></a>

O resultado é este mostrado no GIF, clique para executar o GIF.

 

Acrescentando legendas (caption) nas imagens.

Um recurso bem legal são os captions. Para usá-los basta acrescentar o atributo data-caption no elemento <a>, ficando assim;

 <a data-fancybox="gallery" href="imagens/gato-01.jpg" data-caption="Gato Branco"><img src="imagens/gato-01-miniatura.jpg"></a>
 <a data-fancybox="gallery" href="imagens/gato-02.jpg" data-caption="Gato Cinza"><img src="imagens/gato-02-miniatura.jpg"></a>

Veja como fica;

 

Você ainda pode adicionar elementos HTML no caption, por exemplo;

data-caption="<h1>Gato Branco</h1>Gatos brancos são mais calmos que os cinzas."

Isso deverá ficar assim…

 

Download de exemplo da galeria de imagens

O exemplo usado neste aula pode ser baixado aqui, bons estudos.

download galeriaFancyBox3

criar galeria de imagensgaleria de imagens com javascripttutorial Fancyboxzoom na imagem