Fancybox – criando galeria multimídia interativa

Muitos já devem conhecer este plugin chamado fancybox para criação de galeria para diversos formatos de mídia, pela sua facilidade e praticidade. Neste artigo vou demonstrar como utilizar o fancybox e como se antecipar a possíveis erros do plugin.

A intenção do post é apresentar as funcionalidades do plugin e como utilizar o mesmo, porém vamos fazer uma introdução ao plugin apenas para consolidar as informações do mesmo. Para maiores informações acesse a pagina do plugin com demo.

Demo & Download

Baixe aqui os arquivos de exemplo do tutorial. Preview do exemplo:

Fancybox - Exemplo Demo - Web Social Dev

Introdução

O Fancybox é um plugin relativamente antigo, está presente na web desde meados de 2010, e é muito popular entre desenvolvedores pois é um plugin fácil de ser utilizado, simples e todo baseado em jQuery, que facilita a manipulação do código-fonte.

Ele serve para criar galerias multimídia, ou seja, podemos criar uma galeria tanto para fotos, videos, textos, conteúdo baseado em wireframe, AJAX, entre outros conforme a documentação. Basicamente ele cria apenas a galeria, deixando o conteúdo a ser exibido a caráter do desenvolvedor, dentro do que ele suporta.

Por algum motivo, o Fancybox possui duas versões na internet, a 1.x e a 2.x . A versão 1.x foi descontinuada mas continua disponível para quem desejar utilizar neste link.

Neste tutorial vamos utilizar a versão 2.x, visto que a versão que atualmente tem suporte aos desenvolvedores. Documentação e exemplos de utilização desta nova versão estão disponíveis aqui.

Como utilizar

Após baixar o pacote do Fancybox no site do plugin, devemos criar um arquivo HTML linkando os devidos scripts e arquivo CSS.

No exemplo disponibilizado, o HTML foi elaborado da seguinte maneira:

<!doctype html>

<html lang="pt-br">
<head>
  <meta charset="utf-8">

  <title>Galeria jQuery</title>  

  <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

  <!-- Add jQuery library -->
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

  <!-- Add fancyBox -->
  <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
  <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>

  <!-- Optionally add helpers - button, thumbnail and/or media -->
  <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>

  <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

  <style type="text/css">
    body {
      margin: 0px auto;
      margin-top: 50px;
      width: 500px;
      font-family: calibri;
    }

    img {
      margin: 20px;
      border: solid 3px #424242;
      box-shadow: 4px 4px 20px #888;
    }
  </style>
</head>
<body>
  <h1 align="center">Testando plugin Fancybox</h1>
  <a class="fancybox" rel="group" href="images/woody1.jpg">
    <img src="images/woody1_thumbnail.jpg"/></a>
  <a class="fancybox" rel="group" href="images/woody2.jpg">
    <img src="images/woody2_thumbnail.jpg" alt="" /></a>
  <a class="fancybox" rel="group" href="images/woody3.jpg">
    <img src="images/woody3_thumbnail.jpg" alt="" /></a>
  <a class="fancybox" rel="group" href="images/woody4.jpg">
    <img src="images/woody4_thumbnail.jpg" alt="" /></a>
  <a class="fancybox" rel="group" href="images/woody5.jpg">
    <img src="images/woody5_thumbnail.jpg" alt="" /></a>
  <a class="fancybox" rel="group" href="images/woody6.jpg">
    <img src="images/woody6_thumbnail.jpg" alt="" /></a>

  <p align="center">Web Social Dev ©</p>

  <script type="text/javascript">
    $(document).ready(function() {
      $(".fancybox").fancybox();
    });
  </script>

</body>
</html>

Vamos desmembrar este código para facilitar o entendimento.

No HEAD do documento linkamos os arquivos presentes no pacote baixado do site do Fancybox, arquivos que estão na pasta source do pacote. Os arquivos da pasta helpers são apenas duas formas de visualizar a galeria, um deles adiciona controle de ir e voltar fora da imagem e o outro adiciona a essa mesma funcionalidade porém com miniaturas ao invés de controles, realmente não é obrigatório

Um ponto importantíssimo nesta parte é a a declaração do jQuery em relação ao plugin. Na primeira vez que testei o plugin me deparava com erros do tipo “jQuery is not defined”, e dale testes e nada.

Após analisar o código com atenção, percebi que o erro na verdade era apresentado pois o jQuery ainda não estava carregado, então ao chamar o Fancybox, que utiliza o jQuery, ele retornava esse erro pois não localizava a base do funcionamento do plugin. Basicamente a linha que puxava o jQuery estava depois da linha que puxava o Fancybox, e isso não pode ocorrer, visto que o Fancybox utiliza o jQuery para funcionar, ou seja, ele tem que ser carregado primeiro.

Declarei alguns estilos nas tags body e img para uma melhor visualização do exemplo.

Para criar a galeria, utilizamos o padrão presente na documentação do Fancybox, que é o seguinte:

<a href="link da imagem grande" class="fancybox">
  <img src="link do thumbnail se existir"></a>

Basicamente é aplicado a função do plugin a um elemento a que transforma a imagem thumbnail em link para a galeria com a imagem em tamanho expandido.

Note que no nosso exemplo, é definido um atributo rel="group", que basicamente da a opção de passar para próxima foto a partir de outra criando o conceito de álbum. Sem esse atributo declarado, as fotos não vão apresentar o menu para passar de uma para outra na galeria ampliada.

Após declararmos as os links com as imagens, devemos declarar o script que vai iniciar a função do Fancybox assim que todo o documento estiver carregado, para não causar problemas no processamento do mesmo, confome o exemplo:

<script type="text/javascript">
    $(document).ready(function() {
      $(".fancybox").fancybox();
    });
</script>

Esse script inicia o Fancybox, atribuindo a função do mesmo a todo elemento que tiver a class fancybox declarada, o que transforma no nosso caso o link do elemento <a> em um gatilho para abrir a galeria em tamanho real.

Podemos personalizar várias funcionalidades do fancybox utilizando o seguinte script:

$(document).ready(function() {
    $(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

Com essa função podemos controlar as funcinalidades básicas da galeria que será gerada pelo plugin. Todos esses atributos tem sua devida explicação na documentação, que inclusive conta com a lista completa de atributos do plugin neste link.

Existem outras maneiras muito interessantes de utilizar o Fancybox, podemos por exemplo em uma galeria, determinar efeitos diferentes para cada imagem ao iniciar a galeria. A página de demo do plugin apresenta algumas das diversas maneiras de utilização, que podem ajudar a expandir os horizontes dos desenvolvedores.

Qualquer dúvida em relação ao tutorial, estou a disposição nos comentários.

🙂

  • Christian Charles Sentinela da

    Muito bacana o Post.

    Gostaria de saber como eu padronizo o tamanho da imagem no fancybox? As imagens aparecem no tamanho real e gostaria de padronizar o width e deixar o height proporcional.

    Como faço isso?

    • Existem várias formas, e menos apropriada é colocar width fixo para todas porque dependendo da altura ainda pode quebrar o layout da box, recomendo dimensionar as imagens, se possível todas na mesma medida, fica bem melhor esteticamente.

  • vitor

    sei que o post é antigo mais show de bola.. ajudou mto obrigado

    • Olá Vitor, valeu pelo feedback! Qualquer coisa estamos aí!

  • Juliana Maria Sousa Mesquita

    Adorei, o melhor que já li! Parabéns e muito obrigado!!! (y)

  • Juliana Maria Sousa Mesquita

    Só que quando jogo no servidor ele da erro e não funciona… teria como me ajudar??

    eu separei um arquivo com todas as importações importação e chamei esse arquivo no index principal, só que ele não funciona quando boto nas imagens o class e o rel, porem duplica meu menu.

    • manda um print do erro 🙂

      • Juliana Maria Sousa Mesquita

        Obrigada pela atenção, eu já resolvi mais acredito que através de uma gambiarra e ainda não entendo o motivo de não ter pego quando separei dentro do servidor e chamei a importação em arquivo diferente, veja o link com tudo explicado caso tenha curiosidade http://forum.imasters.com.br/index.php?app=core&module=search&do=user_activity&mid=225528, bom mais uam vez obrigada adorei seu post, está bem explicado! deu até parar mim otimizar, deixar três pastas no servidor e talz.. vlws mesmo! (y)