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;
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.