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/
belo post! acabei de implementar me ajudou bastante, estava com duvidas de como utilizar o plugin!
obrigado
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
Olá Amanda.
Por favor, me envia o seu código para eu analisar.
Att.
Tiago
O problema da Amanda foi resolvido.
Faltou baixar o plugin Fancybox e colocar dentro da pasta js.
Muito bom o conteúdo! Sou iniciante nesta área de desenvolvimento e aprendi bastante com este código.
Abraços!
Boa tarde, como eu diminuo o zoom do Thumb???