Fancybox – Criando uma galeria de fotos

Fancybox é um “lightbox” baseado em JQuery, similar ao Colorbox. Este plugin é bem consolidado na web, utilizado por muitos desenvolvedores, em websites, sistemas, entre outros.

Fancybox permite que uma foto seja aberta em uma janela secundária do tipo modal, sobrepondo a página e o fundo restante da área sobreposta é escurecido (opacidade).

A intenção do post é apresentar uma forma diferente de integração do plugin. Para maiores informações de como usar o plugin clique aqui.

Sem enrolação, vamos direto ao código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fancybox - Galeria de Fotos</title>
 
    <!-- CSS Fancybox -->
    <link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css">
 
    <style type="text/css">
    body{ font-family:Arial, Helvetica, sans-serif }
    li{
        list-style:none;
        display:inline;
        float:left;
    }
    li p{
        text-align:center;
    }
    .thumb{
        cursor:pointer;
        position:relative;
        border:#FFF solid 3px;
        border-radius:264px;
        height:264px;
        width:264px;
    }
    </style>
</head>
 
<body>
<ul>
    <!-- exemplo com legenda -->
    <li>
        <div class="thumb" style="background: url('fotos/paisagem/thumb.jpg') no-repeat;">
            <a href="fotos/paisagem/1.jpg" data-fancybox data-caption="Legenda da foto 1"></a>
            <a href="fotos/paisagem/2.jpg" data-fancybox data-caption="Legenda da foto 2"></a>
            <a href="fotos/paisagem/3.jpg" data-fancybox data-caption="Legenda da foto 3"></a>
        </div>
        <p>Paisagem</p>
    </li>
 
    <!-- exemplo sem legenda -->
    <li>
    	<div class="thumb" style="background: url('fotos/carros/thumb.jpg') no-repeat;">
            <a href="fotos/carros/1.jpg" data-fancybox></a>
            <a href="fotos/carros/2.jpg" data-fancybox></a>
            <a href="fotos/carros/3.jpg" data-fancybox></a>
		</div>
        <p>Carros</p>
    </li>
</ul>
 
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- JS Fancybox -->
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
 
<script type="text/javascript">
    $(document).ready(function() {
        $(".thumb").click(function() {
            var hrefs = new Array();
            $.fancybox.open(
                $(this).find("[data-fancybox]").each(function(){
                    hrefs.push($(this).attr('href'));
                })
            );
        });
    });
</script>
 
</body>
</html>

Resultado:

O resultado final deve ficar como este: http://linhadecomando.com/scripts/fancybox/

6 comentários em “Fancybox – Criando uma galeria de fotos

  • 26 de agosto de 2017 em 16:10
    Permalink

    belo post! acabei de implementar me ajudou bastante, estava com duvidas de como utilizar o plugin!

    obrigado

    Resposta
  • 24 de outubro de 2017 em 13:12
    Permalink

    Eu copiei este códico e criei o arquivo html, criei as pastas com as fotos, porém quando clico na imagem no navegador, não acontece nada.

    Não sei o que estou fazendo errado, poderia me ajudar?
    Obrigada

    Resposta
    • 4 de novembro de 2017 em 21:43
      Permalink

      Olá Amanda.

      Por favor, me envia o seu código para eu analisar.

      Att.

      Tiago

      Resposta
    • 10 de novembro de 2017 em 8:22
      Permalink

      O problema da Amanda foi resolvido.

      Faltou baixar o plugin Fancybox e colocar dentro da pasta js.

      Resposta
  • 14 de fevereiro de 2018 em 10:11
    Permalink

    Muito bom o conteúdo! Sou iniciante nesta área de desenvolvimento e aprendi bastante com este código.

    Abraços!

    Resposta
  • 8 de abril de 2018 em 17:41
    Permalink

    Boa tarde, como eu diminuo o zoom do Thumb???

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *