Ajuda na imagem do Lightbox

rami7 · 23 de agosto de 2013

Alguém sabe como fazer para postar uma imagem de tamanho reduzida e quando clicar ela se expandir? Estou usando o Lightbox, só que no site só mostra como abrir a imagem através de um link.

Desse jeito

diegosomar · 22 de setembro de 2013

Para estes casos eu costumo usar o Fancybox, fácil e rápido de usar.

Segue link do plugin jQuery: http://fancyapps.com/fancybox/

Bom, faça:

1) Inclua a jQuery no seu site, assim (coloque entre as tags <head></head>):


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

2) Inclua os arquivos do Fancybox no seu site, assim:


<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

Obs.: Note que você vai precisar baixar 2 arquivos no site do Fancybox, um JS e outro CSS. Coloque na pasta do seu site e depois altere o caminho dos arquivos nos links acima, conforme a organização de pastas do seu site.

3) Agora, imediatamente antes do fechamento da tag </head>, adicione:


$(document).ready(function(){
	$('a.fancybox').fancybox();
});

Isso quer dizer: qualquer link(a) com a classe fancybox (.fancybox) vai utilizar o método FANCYBOX (.fancybox())

4) Para funcionar, seu HTML precisa ser assim:


<a href="imagemgrande.jpg" class="fancybox">
<img src="imagempequena.jpg" alt="" />
</a>

Isso quer dizer:

Tenha um link (tag a) cujo endereço leve para a imagem grande e neste link adicione a classe fancybox. Ao clicar nele, o método FANCYBOX entrará em ação e mostrará em forma de lightbox a imagem grande, mesmo que dentro do link tenha uma imagem pequena.