Hoje vou mostrar uma galeria de fotos muito interessante que utiliza jquery.
Para visualizar o exemplo, clique aqui.
Para fazer o download do arquivo, clique aqui.
Instalação:
1. Incluir dois arquivos Javascript no cabeçalho de sua página:
<script type="text/javascript" src="jquery.js"></script> – Download
<script type="text/javascript" src="jquery.galleria.pack.js"></script> – Download
2. Incluir o CSS no cabeçalho de sua página:
<link rel="stylesheet" href="galeria.css" type="text/css" media="screen" /> – Download
3. Incluir o script no cabeçalho de sua página:
jQuery(function($) {
$(‘.gallery_demo_unstyled’).addClass(‘gallery_demo’);
$(‘ul.gallery_demo’).galleria({
history : true, // ativa a legenda da foto ampliada
clickNext : true, // ativa o link sobre a imagem ampliada para a próxima
insert : ‘#main_image’, // nome do div onde aparecerá a imagem ampliada
onImage : function(image,caption,thumb) {
// efeito na imagem e na legenda
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) {
image.css(‘display’,'none’).fadeIn(1000);
}
caption.css(‘display’,'none’).fadeIn(1000);
var _li = thumb.parents(‘li’);
_li.siblings().children(‘img.selected’).fadeTo(500,0.3);
thumb.fadeTo(‘fast’,1).addClass(’selected’);
// adiciona um título para a imagem ampliada
image.attr(‘title’,'Próxima imagem >>’);
},
onThumb : function(thumb) {
var _li = thumb.parents(‘li’);
var _fadeTo = _li.is(‘.active’) ? ‘1′ : ‘0.3′;
// efeito ao carregar os thumbs
thumb.css({display:’none’,opacity:_fadeTo}).fadeIn(1500);
// efeito ao colocar o mouse em cima do thumb
thumb.hover(
function() { thumb.fadeTo(‘fast’,1); },
function() { _li.not(‘.active’).children(‘img’).fadeTo(‘fast’,0.3); }
)
}
});
});
</script>
3. HTML
<ul class="gallery_demo">
<li class="active"><img src="img/flowing-rock.jpg" alt="Rock" title="Legenda da primeira foto"></li>
<li><img src="img/stones.jpg" alt="" title="Legenda da segunda foto"></li>
<li><img src="img/grass-blades.jpg" alt="" title="Legenda da terceira foto"></li>
<li><img src="img/ladybug.jpg" alt="" title="Legenda da quarta foto"></li>
<li><img src="img/lightning.jpg" alt="" title="Legenda da quinta foto"></li>
<li><img src="img/lotus.jpg" alt="" title="Legenda da sexta foto"></li>
<li><img src="img/mojave.jpg" alt="" title="Legenda da sétima foto"></li>
<li><img src="img/pier.jpg" alt="" title="Legenda da oitava foto"></li>
<li><img src="img/sea-mist.jpg" alt="" title="Legenda da nona foto"></li>
</ul>
Obs.: Você pode adicionar quantas fotos quiser. O script monta os thumbs sozinho, assim não é necessário criar uma imagem grande e uma miniatura.
13 de maio de 2009 às 14:30
Amigo, parabéns pelo script, é muito bom mesmo.
Gostaria de saber se há a possibilidade de fazer com que essa galeria leia um diretório com várias fotos dentro e também se há a possibilidade de usar páginação nessa galeria. Você poderia me ajudar nisso?
Muito obrigado, você está de parabéns!!!
14 de maio de 2009 às 15:57
Lionel,
Para ler as imagens de um diretório eu reconmendo que você utilize uma outra linguagem de programação, como por exemplo o PHP.
Mais dúvidas é só comentar.
abs,
Felipe
16 de maio de 2009 às 01:36
Olá Felipe, parabéns pelo script!!
Eu tive uma dúvida, gostaria de saber como desabilitar a legenda das fotos.
Grande abraço!
18 de maio de 2009 às 16:13
Thiago,
Tente tirando a tag "title" do link. Talvez resolva.
abs,
Felipe
29 de maio de 2009 às 02:23
Olá! Cara, é fantástico essa galeria, muito simples, a primeira que entendi até agora de Jquery, a gente pode usar ela em algum trabalho de sites que fizermos?
(Jquery ainda estou começando)
Grande abraço e boa sorte na sua vida ai kra!
Meus parabéns mesmo!
29 de maio de 2009 às 08:58
Ids Visual,
Sim, você pode utilizar em algum site que fizer.
abs,
Felipe
29 de maio de 2009 às 10:53
Cara, mandei ontem e você já respondeu.
Grande abraço ai velho! Vou fazer indicação do site pra diversas pessoas que tenho aqui.
Muito obrigado mesmo!
01 de junho de 2009 às 10:06
O problema é qie não funciona com banco de dados. Fiz um bd em mysql e php. Ao "puxar" do bd as imagens elas simplesmente não carregam. vc sabe o que pode estar errado?
01 de junho de 2009 às 17:45
Alexandre,
Qualquer JavaScript funciona com php e mysql.
Se você dar um laço no código " <li><img src="img/stones.jpg" alt="" title="Legenda da segunda foto"></li>" mudando os caminhos das imagens vai funcionar normalmente.
abs,
Felipe
22 de junho de 2009 às 22:37
só to tendo um problema porque auando aumento o numero de fotos algumas caem para a fileira de baixo… ja tentei varias coisas no css mas a aplicação continua instavel. eu tenho que atualizar a pagina para as fotos se organizar corretamente na lista.
25 de junho de 2009 às 10:16
Washigton,
Você precisa arrumar a largura do div para deixar do jeito que você quiser, caso queira que as fotos em miniatura tenha rolagem, você precisaria adicionar um script de rolagem tb.
abs,
Felipe
08 de julho de 2009 às 12:29
Blz chefe. Show de bola a galeria
Eu quero fazer uma no mesmo estilo, só que com as setas DIREITA ESQUERDA nas miniaturas para colocar um monte de fotos. Você sabe como fazer?
09 de julho de 2009 às 12:19
Felipe, fantástica sua galeria de fotos, com algumas alterações no CSS pode-se personalizar, modificar o tamanho das fotos, muito fácil de implementar e usar.
Mesmo para os que fazem o site em html como eu e precisam de atualizações frequentes não dá trabalho algum. Só achei que ficou um pouco lenta em máquinas um pouco ultrapassadas como a minha.
Tem alguma configuração que eu possa fazer para torná-la mais rápida?
Um abraço e parabéns pelo belo trabalho.
27 de outubro de 2009 às 10:57
como eu faço pro tamanho da imagem grande ficar 400 px??
não consegui mudar isso..
muito bom o material!!!
27 de outubro de 2009 às 11:53
Carlos,
Basta você montar a imagem com 400px de largura.
abs,
Felipe
01 de novembro de 2009 às 08:02
Felipe, excelente o artigo. De forma rápida e fácil resolveu o que para mim parecia que iria ser um problemão.
onde eu vi ela pela primeira vez dizia
Artigo por: http://www.feloliveira.com.br Felipe Oliveira da Silva
Galeria por: http://monc.se monc
Saberia me informado sobre a questão de direitos autorais? posso usar livremente em meu site?
jQuery 1.2.3 – New Wave Javascript
Copyright (c) 2008 John Resig (jquery.com)
Dual licensed under the MIT (MIT-LICENSE.txt)
and GPL (GPL-LICENSE.txt) licenses.
07 de dezembro de 2009 às 08:29
Olá,
Eu tenho um datalist (pai) e um outro (filho)
Eu desejo colocar, essa galeria , denstro do datalist pai, da seguinte maneira :
No “dlAutoImg” (datalist filho que esta dentro do Pai) aparecem as imagens menores respectivas à aquela posicao da repeticao,
Porem o meu main_imagem (que esta no datalist pai) so aparece na primeira posicao do datalist, mesmo eu clicando nas imagens menores correspondentes a outras posicoes (ex: clico na imagem que esta na
repeticao 6) …. atualiza somente o main_image da primeira posicao …
Desejo saber como customizar esta Galeria para poder passar cada posicao do datalist para este main_image …
Já estou ha um bom tempo procurando solucao…
Deste já agradeço,
Nycolas Barrel.
07 de dezembro de 2009 às 08:31
Felipe, teria como eu te enviar email com o codigo , para ficar facil entendimento ?
realmente estou precisando de ajuda,
essa galeria é otima, gostei muito do artigo, mas preciso deste tipo de repeticao
Att.
Nycolas Barrel.
07 de dezembro de 2009 às 09:08
Fala Nycolas, blz?
Pode enviar para meu gmail fel.prog@gmail.com
Abs,
Felipe
11 de dezembro de 2009 às 08:39
Olá Felipe,
te enviei um email com o codigo, você recebeu ?
Att,
Nycolas Barrel.
12 de dezembro de 2009 às 14:32
Felipe, pode ser extraido de um banco de dados os dados das fotos. Tipo cadastro elas e depois vizualizo com esse script.
17 de dezembro de 2009 às 10:24
Luiz,
Pode sim, é só fazer um select no Banco de dados e ir colocando as imagens em um comando de repetição (for, foreach, while).
Abs,
Felipe
13 de janeiro de 2010 às 10:44
Ok, valeu Felipe.
14 de janeiro de 2010 às 23:01
Felipe, eu fiz como me falaste, com o “while”, mas le somente a primeira imagem as outras ele não le.
Me diz o que fazer.
16 de janeiro de 2010 às 01:03
Como procurei um tutorial completo, detalhado e bem explicado…rodei, rodei e consegui achar o teu. Aqui ficou 9.
Pergunta:
Há como eu não precisar clicar na foto para mudar? a intenção é deixar as mudanças de uma foto para outra automática.
No aguardo e Parabéns cara.
19 de janeiro de 2010 às 11:29
Rafael,
Você tem o link ou o código para eu dar uma olhada?
Abs,
19 de janeiro de 2010 às 13:10
Oi Felipe,
Na verdade gostaria de saber há possibilidade das fotos desta galeria mudarem automaticamente, sem precisar do clic nas miniaturas.
19 de janeiro de 2010 às 13:36
Luiz Antonio Giachini,
Você tem o link ou o código para eu dar uma olhada?
Abs,
25 de janeiro de 2010 às 15:18
Amigo eu fiz tudo correto mais deu um problema que nao encontri o erro no firefox como sempre funcionou corretamente isso nao e novidade mais no querido EXPLORE (NAO FUNCIONA AFFF!!!!)
.
O TIO BIO e foda nao ajuda a gente mesmo
Terei como vc me dar uma ajudinha para fazer funcionar?
Att,
Sinesio Bittencourt
26 de janeiro de 2010 às 17:17
Sinesio,
Você tem o link para eu dar uma olhada?
Abs,
Felipe
26 de janeiro de 2010 às 18:09
Felipe,
Há como implementar um carrosel para as miniaturas?
ao clicar na primeira imagem automaticamente já passa para a segunda, terceira e assim sucessivamente, passando por toda a galeria.
você já viu algo assim?
26 de janeiro de 2010 às 23:25
Felipe você me pediu o site,
http://www.giachini.com/lixo/galeria_j_query/
26 de janeiro de 2010 às 23:28
ou o script eu mande pro seu email. do Gmail.
30 de janeiro de 2010 às 13:57
Felipe vc poderia me orientar como inplementar a função timer no jqueri galleria?
no site do google do galleria um gringo citou esta function:
/* AUTOPLAY */
function timeout() {
$.galleria.next(); setTimeout(“timeout()”, 3000);
vc tem alguma solução?
02 de fevereiro de 2010 às 09:58
Luiz,
O problema é que você esta repetindo o div “main_image”.
Ele tem que aparecer somente uma vez onde a imagem será ampliada.
Abs,
Felipe
02 de fevereiro de 2010 às 17:01
Eu já havia visto isso, ficou assim. mas mesmo assim ele passa todo as as imagens do banco e permanece a ultima na tela e na menor permance a primeira do banco.
« anterior | próxima »
<img src= alt=”" title=>
02 de fevereiro de 2010 às 17:14
Valeu pela ajuda, vc é muito bom em PHP, valeu mesmo.
Se vc quiser postar a qui o script é só me falar, para pessoal utilizar, blz…
24 de fevereiro de 2010 às 14:16
Tem como desabilitar as miniaturas e deixar só o próximo e anterior?
02 de março de 2010 às 10:25
Felipe Show de bola, mas o Java que é para incluir no cabeçalho não esta fechando.. esta dando erro.. desta linha pra baixo “onThumb : function(thumb) { “
19 de maio de 2010 às 11:03
Olá felipe gostaria de saber se tem como mudar o tamanho dessa galeria nao to conseguindo pelo codigo CSS se você poder me responder mande-me um email ou diz aqui pelo comentario mesmo
21 de maio de 2010 às 23:17
Dark,
Pode ser mudada direto no cSS em gallery_demo
Abs,
01 de junho de 2010 às 19:00
ei dr, queria saber se eu colocar muitas imagem se ele cria automaticamente uma paginação? e se não pode me dizer como eu posso fazer pra ele paginar as várias imagens! obrigado deste já!
13 de junho de 2010 às 16:50
Muito caprichada esta galeria.
Uma duvida em caso 50 fotos ela vai carregar todas para depois mostrar.
Abraço
21 de junho de 2010 às 03:24
Olá Felipe,
a galeria é ótima, perfeita pra mim que trabalho com ilustrações e mostar como portfólio, mas n tô conseguindo colocar no meu blog de jeito nenhum, até que eu consegui colocar o css e o script numa boa sem dá erro no html do blog, mas os dois primeiros .js nao tô conseguindo..
pode me ajudar?
abraço
21 de junho de 2010 às 07:54
Santiago,
Tem algum link para que eu possa dar uma olhada?
Abs,
Felipe
21 de junho de 2010 às 14:50
Olá novamente Felipe,
fiz 3 prints de telas de tentativas minhas de adicionar a galeria no html do meu blog de testes, daí zipei as imagens e deixei no meu perfil do 4shared. Aqui o endereço pra vc fazer o download das imagens e ver o q estou tentando fazer:
http://www.4shared.com/file/MnKUtEiG/prints_de_telas.html
e obrigado pela atenção =)
07 de julho de 2010 às 15:47
Essa galeria não funciona com as versões novas do jQuery, alguém achou uma solução?
08 de julho de 2010 às 19:52
Rafael,
Normalmente essa galeria funciona com todas as novas versões do jQuery. Será que não esta dando conflito com outros scripts? Exemplo: motools?
Abraços,
20 de julho de 2010 às 09:21
Felipe bom dia, parabéns pelo blog, adorei esse script e estou querendo usuálo em um site de um cliente, pode me dizer como eu faria para ao invés de clicar no tumbnail e mostrar a imagem grande eu passar o mouse no tumbnail evento onMouseOver() e exibir a imagem?
27 de julho de 2010 às 12:49
Felipe,
Bacana, gostei do script. Sei que já faz um bom tempo este post, mas agora o vi e estou a precisar de desenvolver uma galeria deste mesmo tipo com admin para insert/delect de imagens.. Gostaria de saber se há possibilidade de me ajudar, ou frellar o trabalho, ou seja fazer isso por mim e dizer o prazo e custo. Obrigado!
Espero poder contar contigo nisso.
Um abraço.
16 de setembro de 2010 às 13:21
Felipe,
A galeria é show de bola, muito bacana mesmo! Mais tenho uma dúvida? E se eu quiser acrescentar mais fotos? Mais tipo, não queria que as miniaturas ficassem sobrepostas, teria como colocar botões de avançar e voltar nas miniaturas?
12 de março de 2011 às 18:06
Mto bom o script.
Mas tenho a mesma dúvida do Erick Costa, como deixar as miniaturas dentro de um carrossel ? Com um btn de avançar e voltar.
Abraço
15 de abril de 2011 às 15:36
Adorei o exemplo, poderia agora nos ajudar com o banco de dados e o plugin carrossel para exibir mais imagens e na mesma linha? Clicaria num extremo das miniaturas e ela avançaria um numero de imagens, exemplo 1 ou 3 sei lá…
Mas a ideia e colocar as imagens no banco de dados e atraves de um repeat region do dreamweaver cs4 elas apareceriam.
Imagino que sejam paginas:
1. cadastro de usuario,
2. criação do album,
3. página de uploads (multiplos de preferencia) e que possa escolher a foto da capa,
4. página de exibição,
5. Opção para apagar uma foto especifica.
6. na criação no banco de dados o nome da imagem deve ter o seguinte padrao: evento_data_numero da_id_da_foto.jpg
exemplo: playcenter_2010_042.jpg
Se possivel relacioar o id da imagem deve estar relacionado ao album e não ao indice do banco de dados.
E aplicando nas miniaturas a carrossel para dar um efeito bonito, se possivel também por uma transição automatica ficaria perfeito.
21 de abril de 2011 às 21:11
Tem exemplos de carrossel no MXMasters, Upinside e Video Aulas Brasil.
Pra baixar as video aulas do vimeo.com é so acessar o icyvideo.com (necessario ter java instalado)
13 de maio de 2011 às 13:56
Felipe,
Muito legal o artigo e a galeria.
Mas diga-me: Seu eu implementar um mecanismo de update AJAX, para a página não dar postback, vai comprometer o funcionamento do jquery?
Obrigado.
31 de maio de 2011 às 08:38
Muito Obrigado pela Galeria.
Consegui adaptá-la facilmente ao meu código php
e tá vindo com as imagens salvas no base de dados Mysql
Parabéns pelo trabalho.
10 de julho de 2011 às 00:42
olá, estou começando na área e achei o seu blog muito
interessante, com certeza vai me auxiliar muito nos meus estudos,
mas, não consigo fazer essa galeria funfar de jeito nenhum! estou até puxando o css, js e jquery da galeria diretamente do seu site, mas não consigo.
o que será q to fazendo de errado, pelo amor de Deus?!
10 de julho de 2011 às 01:09
consegui finalmente, o cdn do goolge está com a sintaxe errada (chrome que disse).
29 de julho de 2011 às 22:13
Parabéns pelo site.
Não estou conseguindo fazer download do arquivo de seu exemplo de galeria, esta corronpido, favor consertar.
Obrigado,
milton
28 de agosto de 2011 às 10:28
Felipe,
A galeria esta otima,
Eu implementei a galeria em um site que estou fazendo,
porem quando eu coloco a galeria muda toda a formatação do site, eu ja fiz as alterações necessarias no css, porem estou achando que é o javascript que ta fazendo as alterações no restante do site, você poderia me ajuda?
estou no agurde.
16 de setembro de 2011 às 15:25
Oi Felipe, estou com dificuldade nas imagens.Ela vem do bd e é maior, porem nao estou conseguindo mudar no css como vc esplicou.Pode me dizer a linha que devo mudar?Queria deixa em 800X600 px.Grato Junior
16 de outubro de 2011 às 23:03
Olá!
Posso usar este exemplo para expor umas imagens em meu site?
É só um demo? o exemplo expira?
Thanks
26 de outubro de 2011 às 18:35
Pena que não funciona com o Chrome !!!
04 de novembro de 2011 às 14:56
Muito boa essa galeria Felipe.
Gostaria de somente tirar os thumbnails, pode me dar uma luz ?
16 de novembro de 2011 às 11:56
Boa!
19 de novembro de 2011 às 22:30
Estou usando o Chrome para visualizar. E esta Ok. Excelente galeria! Parabens
22 de novembro de 2011 às 15:22
Boa tarde filipe !
estou com um problema addi a galeria ficou show de bola mais quando eu addi muitas fotos ela vai descendo em vez de criar uma rolagem automática queria saber se tem como colocar uma rolagem automática nela
28 de novembro de 2011 às 10:29
Amigos estou com um problema, não sei oque faço, seguinte, Coloco todos os códigos java script no cabeçalho Mas simplesmente nao vai, Fica um embolorado de imagens, e a galeria não aparece.
10 de dezembro de 2011 às 22:08
eu ri muito com o pesoal, bando de folgados fazpramim.com
25 de dezembro de 2011 às 22:19
eu queria saber como eu faço para redimensionar a imagem apenas pelos códigos, nem pela edição, para eu não poder editar uma por deixando mais trabalho, apenas eu hospedar ela e a galeria mesmo redimensionar para um tamanho especificado por mim. como posso fazer isso? Obrigado desde já
05 de janeiro de 2012 às 23:58
Teria como colocar setas de direita e esquerda, do lado das miniaturas para que eu possa colocar mais fotos?
23 de janeiro de 2012 às 18:12
Olá felipe, estou precisando da galeria desse tipo,
porém preciso que a legenda saia ao lado da imagem
com zoom, poderia dar uma dica ?
Obrigado !!
12 de fevereiro de 2012 às 01:06
Cara, mexi milhares de vezes no codigo e não achei onde
tira o link da ‘imagem grande’, para passar apenas pelas setas. voce sabe me dizer como eu faço isto?
09 de março de 2012 às 12:34
Bom, valeu pelo post.
15 de março de 2012 às 16:20
gostaria de saber se pode ser colocado mais de 9 miniaturas? Sim sim como ficaria para ver a 10ª,11ª,12ª…?
20 de março de 2012 às 14:17
Olá!!
Gostaria de saber se tem como colocar isso no post?
Aguardo a resposta!!
Desde já obrigada!!!
20 de março de 2012 às 14:24
Desculpe, não fui muito explicativa, eu quero dizer que, se tem como colocar essa galeria dentro do post?
Aguardo a resposta!!
Desde já obrigada!!
22 de março de 2012 às 18:42
Olá Felipe.
Parabéns pelo post. Muito bacana, funcionou tudo certo. Minha única dúvida é quanto à versão dos arquivos. Tem atualizações? Tentei trabalhar com a última versão 1.2.7 do jquery, aí não funcionou. Se puder, gostaria de sua ajuda para saber porque.
Obrigado.
27 de março de 2012 às 17:09
Não funciona no firefoz e nem no IE, só no chrome, tem erro aí hein
19 de abril de 2012 às 10:37
Ola, Eu to Querendo Aplicar Isso Mais.. No CSS que vocÊ postou a class .galleria não existe no HTML… Poderia me Ajudar?
26 de abril de 2012 às 15:04
No arquivo para download ao abrir a index com IE da problema.
28 de abril de 2012 às 22:51
Retiro o que eu disse, não tem problema algum, era meu IE que estava viajando mesmo.. VLW!
15 de maio de 2012 às 00:18
Oi Felipe. Muito boa essa galeria!
Gostaria de saber se tem como colocar as imagens pra rodar automaticamente, além do uso do prev e next que já constam no script??
Aguardo sua resposta! Obrigada!
19 de maio de 2012 às 02:33
gostaria de saber como posso definir a posiçao da galeria para adaptala ao meu template …e gostaria de saber se tem problema usar o codigo em meu site ou quando eu precisar?