Às vezes queremos colocar varias imagens ou fotos na mesma postagem, mas fica um pouco esquisito, ocupando espaço demais na pagina, então uma boa solução para esse problema é organizar uma galeria de fotos ou dizendo em outras palavras fazer que todas as imagens apareçam no mesmo lugar, como um slide com miniaturas ou links que clicamos para ampliar as fotos. Veja o código:
<iframe src="http://img41.imageshack.us/img41/9807/oceanon.jpg" marginheight="0" marginwidth="0"frameborder="0" width="400" height="300"scrolling="no" name="galeria" id="galeria"></iframe><br />
<a href="http://img11.imageshack.us/img11/6259/lhlake.jpg" target="galeria">Lago</a>
<a href="http://img190.imageshack.us/img190/851/praia.jpg" target="galeria">Praia</a>
Se quiser hospede as imagens no ImageShack então pegue o endereço de cada uma subtitua no código, lembrando que a imagem que está na parte do iframe vai aparecer e as outras ficaram ocultas só aparecendo quando clicar nos links abaixo, cuidado para não pegar o código errado a url da imagem está em direct link. Outro detalhe é que se invés de usar palavras quiser usar miniatura das imagens para fazer os link é possivel basta colocar o target="galeria" no código.
A parte principal é observar target=”galeria” veja que esse é o mesmo nome que usamos logo na primeira linha name="galeria", então se for usar mais de uma vez esse código no seu blog ou site tem que usar nomes diferentes para evitar erros.
Cuidado com o tamanho das imagens elas tem que ser todas iguais no caso usei 400 por 300, esse numero também está no código do iframe, então faça os ajustes nas imagens antes de publicar. Isso porque na verdade o iframe não é transparente, ele tem fundo branco então se as imagens forem de tamanho diferente ficará aparecendo uma margem branca, além disso, elas ficaram cortadas, pois o tamanho 400 por 300 que colocar no código do iframe é fixo, ou seja, ele não se ajusta ao tamanho das imagens.
Veja também:
Banners aleatórios
Como hospedar imagens
Links dentro da Página
Script com dia da semana e do mês
Site abrindo sozinho(parent.location)
Adoro as tuas dicas, vou testar. Boa semana pra ti.
ResponderExcluirExcelente dica!
ResponderExcluirObrigada, sempre, por dividir algo muito legal para os blogs!
Abraços,
Luka
Perfeito! PArabéns!
ResponderExcluirBom dia caro.
ResponderExcluiro seu blog é maravilhoso.
Sua dicas são ótimas.
Poderia me ajudar com algo?
Gostaria de enviar um email em html, iqual ao teu! recebi perfeitino, mas quando envio para alguem com minhas imagens, não rola o slide, mas abre outra página com a foto!
Pode me ajudar?
Obrigado.
http://morarbemmorumbi.blogspot.com
marechal
ResponderExcluiruso o outlook para enviar email, mas não tem nada de especial apenas o endereço dos meus blogs como assinatura
essa dica é boa d+ era o q eu tava procurando por todo canto e nao achava, mas a única coisa nao legal nessa dica é a parte do tamanho da imagem q tem q fica ajustanto, mas fora isso ta massa.
ResponderExcluirvou aproveitar a ocasião e dizer q coloquei um link direto pra esse blog na pág. ini. do meu blog, pq esse blog ja mim ajudou d+.
se quiser uma parceria agradeço.
freefacil.blogspot.com
a dica nao esta bem explicada, .. não fala como por exemplo, onde hospedo o codigo pois nas postagens nao consegui colocar o codigo... o que eu faço para ficar igual a demonstração?? D:
ResponderExcluirigor
ResponderExcluircopiei e colei o código do jeito que está aqui no meu blog e testes e funcionou perfeitamente, talvez quando foi modificar o código apagou alguma coisa além do endereço das imagens.
http://dicaparablogs.blogspot.com/2009/06/lago-praia.html
Opa, ótima dica, valeu.
ResponderExcluirAbraços.
Otima dica!
ResponderExcluirTem como fazer que ao clicar na imagem abra a imagem maior?
abraço
é possivel usar esse código com miniaturas, só precisa colocar imagens em vez de link, ou seja onde escrevi lago coloque assim:
ResponderExcluir<img src="url da imagem" border="0" />
claro que usando uma imagem já reduzida e não a mesma que será mostrada
Adorei a dica mas tambem gostaria de saber como colocar as imagens todas do mesmo tamanho e como fazer para as imagens rolarem automáticas.
ResponderExcluirBjs Barbet
Barbet@bol.com.br
Barbet para deixar as imagens do mesmo tamanho precisa editar no seu computador, veja aqui alguns programas para editar imagens
ResponderExcluirhttp://www.dicasparablogs.com.br/2008/08/programas-gratuitos-para-edicao-de.html
e sobre banners deslizando
http://www.dicasparablogs.com.br/2008/03/banners-deslizando.html
Boa dica como sempre vc só dá boas dicas mas...
ResponderExcluironde eu colo esses códigos ? ?
Elias, esses códigos podem ser usados em uma postagem ou como um gadget de html/javascript(pagina layout)
ResponderExcluirola amigos do dica para blogs, vcs poderiam me passar o codigo html para passar fofos de um lado para o outro no meu blog? tipo com a opçao marque. é quie arrumei uns dois codigos e as fotos ficam uma em cima da outra e nao uma atraz da outra com deveria fica. da pra me ajudar? veleu galera!!!
ResponderExcluirlilian, só conheço o código marquee para fazer isso
ResponderExcluirhttp://www.dicasparablogs.com.br/2008/03/banners-deslizando.html
gostaria de saber como faço pra deixar as imagens em miniaturas lado a lado, porque no exemplo elas ficam uma em cima da outra.
ResponderExcluiresdras
ResponderExcluircoloque o código das miniaturas dentro disso aqui:
<div style="display:inline">codigos das miniaturas</div>
oi,como faço p tirar uma album de postagem??? no meu tem 2 e não sei remover...não entendo nenhum código desse...me ajude..rsrs...Bjiiim
ResponderExcluirdannybiju
ResponderExcluirprecisa mexer nos códigos para colocar e retirar albuns, mas use nossa pesquisa tem outros jeitos de fazer um galeria de imagens ou slides no blog
Ola.. Estou com dificuldades de fazer uma galeria no blog.
ResponderExcluirEu queria que quando fosse no link lago por exemplo, pudesse colocar o link na imagem do lago tb...no meu caso ele ficaria abrindo a galeria da web mesmo onde hospedo pelo picasa. Ficaria bem simples esse tipo , mas não estou conseguindo.
existem varios jeito de fazer galerias de imagens, tem que procurar o que for mais fácil para vc
ResponderExcluirCerto! mas nesse exemplo tem como essa imagem receber um link tb. Entao ela iria para outra página onde contém todas as outras imagens. No meu caso iria abrir a galeria do picasa. Obrigado
ResponderExcluirneste caso não tem como colocar links nas imagens
ResponderExcluirOlha me da uma dica rápida entao...
ResponderExcluirO problema para mim é o internet explorer última versão, pq ja testei em outros navegadores. Eu to tentando colocar as fotos lado a lado no meu blog, para nao ficarem uma embaixo da outra. Faço pelo Dreamweaver as tabelas e coloco uma miniatura que vai abrir a galeria no picasa certo. So que as imagens somem quando está dentro da tabela e nos outros navegares fica ok. Não sei agora já viu isso? Não consigo arrumar se não for por tabelas.
o pior é que o blogger trabalha com divs e não tabelas, precisa começar a mexer mais com CSS.
ResponderExcluiras vezes que usei tabelas no blogger foi um desastre.
Exato. mas pq os outros navegadores funcionam... nao posso usar pq a maioria usa o IE. Agora com CSS já usei algumas vezes no Dream... mas nao em galeria. Mas como faço em CSS galerias sem usar tabelas. Eu vou pesquisar tb.
ResponderExcluiressa realmente é uma boa pergunta, mas somente os desenvolvedores dos programas poderiam responder.
ResponderExcluirsempre houve diferenças entre o internet explorer e firefox, infelizmente nem todos podemos corrigir com o código, algumas coisas funcionam bem em somente um deles
Gostei , mas como faço para colocar imagens do meu computador na galeria , ao invez de links?
ResponderExcluirprecisa hospedar as imagens no imageschack e depois montar o código
ResponderExcluirseu blog é muito bom, no começo não entendia muito bem, mais depois que pequei o jeito consegui fazer as coisas, mais nessa dai eu não entendi muito bem o que fazer você poderia explicar com mais detalhes, ficou um pouco vago a parte dos codigos, quais colocar no lugar desses ai que você colocou.
ResponderExcluirTwilight Fans
ResponderExcluiro código todo é colocado pela pagina layout, adicionar gadget, html/javascript.
as linhas com endereço das imagens podem ser quantas você quiser, basta hospedar as imagem e substituir os endereços no código.
Fabiano, Consegue um tuto da galeria lightbox pra gente? =D
ResponderExcluirestou terminando de testar o código do lightbox, se der tudo certo amanhã vou publicar sobre isso.
ResponderExcluirFabiano eu te amo aeiuieuiaeo
ResponderExcluirOlá Fabiano,
ResponderExcluirColoquei a galeria de imagens no meu blog e ficou ótimo, mas como são dez fotos os links com os nomes das fotos ficou meio comprido um em baixo do outro, até o 4º nome dá prá ver tudo sem rolar, mas depois tem que ficar desce e sobe para clicar no nome e ver a imagem, tem como colocar os nomes lado a lado, pelo menos umas quatro fileiras de nomes cada coluna?
Abs.,
Fátima.
Princess Life Bijoux
ResponderExcluirantes de colocar os links é possivel fazer uma barra de rolagem se quiser, assim:
<div style="overflow:auto; height:200px;border:1px solid #000000">
link
link
link
</div>
altere o valor 200 como desejar, ele é o tamanho da barra
Fabiano, Estou tentando colocar as miniaturas ao invés dos nomes das imagens e não estou conseguindo, tem horas que só aparecem os nomes com os links das imagens e tem horas que não aparecem nem os nomes e nem os links. O que estou fazendo de errado, qual código eu retiro e qual código eu coloco e onde devo colocá-lo. Já mudei o target="galeria" para todos os lugares no código e não dá certo... Abraços.
ResponderExcluircoloque o código desse jeito no lugar do link de texto
ResponderExcluir<img src="endereço da imagem" border="0" />
apenas coloque o endereço da imagem no local indicado
eai cara, gostei tanto da idéia que uso muito, e com muitas imagens por isso é muito ruim ficar editando, então vamos logo a questão:
ResponderExcluirVocê poderia criar um gerador onde agente coloca o link da imagem e depois aparece o código pronto, seria muito bom.
Se você não conseguir (o que eu dúvido) tenta achar um link com algo do tipo que me ajudaria muito!
flw
Marcelo Bernardi
ResponderExcluirvou ver o que é possível fazer sobre o gerador de códigos.
Obrigado pela dica, a galeria é otima e simples, só que estou com um probela. Eu estou usando no meu blog com um script para desativar o botão direito do mouse que está funcionando em todo ele, mas na galeria ele não funciona, na foto que fica maior. O que posso fazer para ativar na galeria também?
ResponderExcluirCaren Araujo
ResponderExcluirinfelizmente essa galeria é feita com iframe, então não tem como proteger as imagens dentro da galeria.
Cara, graças a essa dica, com pequenos ajustes consegui finalmente uma galeria que funcione:
ResponderExcluirDêem uma olhada, ficou como eu queria !!!
Valeu, galera !!!
Fala ae Fabiano, um ótimo blog o seu, parabnes!!!
ResponderExcluirFabiano é o seguinte: Como faço para fazer meu abum de fotos ser mostrado como no "novo Orkut"... imagem miniaturas com barra de rolagem?
Gostaria que vc ensinasse dando exemplo como vc fez neste post com os códigos fontes todos nos seus devidos lugares, é porque ao longo dos comentários vc foi colocando códigos e onde colocar e eu não entendi muito bem.
desde já agradeço!!
DJ PRANDO
ResponderExcluirvou pesquisar sobre o assunto e fazer uma postagem sobre isso.
cara valeu simples facil rapido leve show é 10 as postagens
ResponderExcluirTeria como colocar somente as imagens rolando sem os links?Pq se coloco muitas imagens,fica aquela fila de links embaixo das fotosss
ResponderExcluirGrupo de oração
ResponderExcluirveja aqui sobre imagens deslizando Banners deslizando
Fabiano,obrigada pela atenção.Mas deixa te falar mais uma coisa.
ResponderExcluirO que eu quero é do jeito desse post são fotos mas o que não quero é colocar esses links embaixo delas.Entendeu??
no lugar dos links de texto poderia colocar links com imagens em miniatura, funcionaria perfeitamente, troque o texto do link por
ResponderExcluir<img src="endereço da imagem" border="0" />
Entendi,crio uma miniatura,hospedo e troco.!!!
ResponderExcluirtemos diversos tutoriais sobre Hospedagem de Imagens, veja esse do link ou use nossa pesquisa para ver outras dicas
ResponderExcluirFabiano,olha que dica legal que achei do blog da Elke!!!
ResponderExcluirhttp://templateseacessorios.blogspot.com/2010/12/gerador-de-slide.html
achei interessante o site, vou fazer um video tutorial sobre ele no final de semana
ResponderExcluirBrigado!! sabia o código mas naum sabia q dava pra colocar no blog tmb!!! VLW
ResponderExcluirMuito obrigado pela dica apliquei em meu blog e deu super certo, foi realmente muito legal, seu blog é de grande ajuda Parabéns obrigado
ResponderExcluirTem como fazer com que os links ou miniaturas fiquem lado à lado?
ResponderExcluirotimo post!
valew Fabiano.
Felipe Argôlo.
coloquei uma galeria lightbox no meu blog,deu tudo certo, mas minha galeria tem 5 coluna, no blog apareçe com 2 colunas, porquê?
ResponderExcluirDecio
ResponderExcluiresse códgio não tem colunas...
veja aqui sobre Dividir um gadget em duas colunas
Caro Fabiano, estou tendo um pequeno problema com iframes, pois os mesmos quando coloco o atributo HEIGHT a 100% no Mozilla firefox existe um erro, será que você conhece algum modo pare resolver este problema?
ResponderExcluirCaio Corrêa Kawasaki
ResponderExcluirnão use porcentagem no iframe... dá erro as vezes.. tente usar um valor especifico
Oi, sou o Igor..
ResponderExcluirHá muito tempo quero criar uma galeria de fotos no meu blog, mas não sei como. Quero saber se eu posso criar uma galeria igual ou parecida com essa desse link http://www.amyleebrasil.com/galeria/ ??
Você pode me ajudar a criar uma, preciso muito organizar as imagens do meu blog.
Obrigado =)
anonimo, isso poderia ser feito, mas seria uma pagina fora do seu blog... seria necessario saber criar paginas de internet
ResponderExcluirAcabei de criar um blog pra mim... voltado mais para atletas e corrida de rua, so que nao sei como trabalhar com html e tenho muita dificuldade em aceratar alguns paramentros, por exemplo estou querendo postar as fotos de corridas que participo por ua associação de corredores e não sei com fazer,outra coisa que achei interessante no seu blog foi a caixa arquivos do blog por mês, tem como me passar umas dicas, se puder acessar meu blog e falar algo... http://runliving.blogspot.com/
ResponderExcluirDesde já agradeço!
Cleber Cabral
ResponderExcluiros arquivos separados por mês é um gadget.
só precisa entrar em design, clicar para adicionar um gadget e procure por arquivo
Obrigado pela dica, era tudo o que eu procurava - e precisava. Simples e fácil!
ResponderExcluirDeus te abençoe, meu irmão!
Grato pela dica...
ResponderExcluirEstava procurando algo do tipo a muito tempo, na verdade já estava frustado pois muitos são muito complexos, mas este é simples e fácil de se usar.
ResponderExcluirAgradeço por ter feito um post cobre este assunto, me ajudou muito.
Continue assim, você esta no meus favoritos.
Coloquei o código no blogspot e funcionou direito, mas no worpess não.
ResponderExcluirQual o problema?
talvez o wordpress não aceite iframe ou tenha algum outro código gerando conflito
ResponderExcluirHola Fabiano;muito obrigado pelas dicas.Agradeço muito pela ayuda !Meu Blog esta ficando legal só que a mi me gustaria que minha galeria de fotos ficase com botões "PROXIMO-ANTERIOR"Como poso fazer?Agradeceria enormemente que me ayudase,pr favor.
ResponderExcluirJuan Arriaga Martinez
ResponderExcluirainda não fiz tutoriais sobre isso...
estamos aguardando para ver se o blogger reativa o lightbox que funcionou uns dias no mes de setembro
mas vou procurar um código que não seja muito complicado para fazer essa galeria do jeito que você falou.
Fabiano;estoy aguardando por ese codigo!Una vez mas agradeço sua atenção.
ResponderExcluirFabiano, como que fa zpara os principiantes.? Nao entendi onde colo esse codigo, nem quando escolho as imagens.
ResponderExcluir@Maria Tereza Fartes o código é para colocar em um gadget de html/javascript
ResponderExcluirmas infelizmente alguns códigos são complicados e não tem jeito mais simples de fazer por enquanto
MUITO BOM!
ResponderExcluirMUITO BOM!
ResponderExcluirCara blza?Parabéns pelo post...será que da para aumentar o tamanho da imagem principal...consegui fazer tudo direitinho, inclusive com a imagem no lugar do link (imagem pequena) só que quando clico no link a imagem principal é sempre do tamanho 400 x 300 da para aumentar a imagens??Aguardo a sua resposta e mais uma vez parabéns
ResponderExcluirvocê pode modificar como quiser o tamanho das imagens só precisa alterar os valores 400 e 300 no código e usar as imagens no tamanho certo (fazer as imagens no tamanho correto e não alterar o tamanho da imagem apenas com códigos)
ResponderExcluirpoderia me passar o código para deixar os botoes
ResponderExcluir"lago e praia" do lado do slide em vês de ficar embaixo do mesmo.obg
onde está o
ResponderExcluira href=.....
coloque style='float:left' para deixar o link a esquerda. O código fica assim:
a style='float:left' href=....
e use a palavra right em vez de left para fazer o mesmo do lado direito
obrigado! funciono legal, agora teria como deixar a imagem clickavel? tipo quando click-se, ela apareceria ampliada em outra pagina.
ResponderExcluircom esse código não tem como clicar na imagem
ResponderExcluirOlá, tenho um blog do tipo DIY. Como faço para ter uma página com uma galeria com imagens de todos os posts, separados por assunto, para que a leitora escolha qual projeto quer ver?
ResponderExcluirGrata
http://mulherpreciosa.blogspot.com.br/
Vera olhe esse link:
ResponderExcluirGadget para Mostrar Imagens em Miniatura dos Posts Recentes
lá você pode configurar quantas imagens quer mostrar mas não exagere na quantidade senão seu blog fica lento demais
Tem como deixar a imgem grande centralizada no meio da pagina se pder mim passar agradeço
ResponderExcluirpoderia centralizar as imagens usando a tag center antes e depois do código que mostramos:
ResponderExcluir< center >
código dos slides
< / center >
Fabiano... Tem como mudar a foto central?
ResponderExcluirAquela do iframe?
a foto inicial que aparece no iframe é essa aqui:
ResponderExcluiriframe src="http://img41.imageshack.us/img41/9807/oceanon.jpg"
só precisa trocar o endereço da imagem
Fabiano... Poderia me dizer como é feito essa galeria feita neste espaço?
ResponderExcluirhttp://www.marcelocastilhofestas.blogspot.com.br/#!http://marcelocastilhofestas.blogspot.com/2012/10/15-anoslilas.html
Eu queria muito fazer uma assim!
Pode me ajudar?
isso é um template dinâmico do blogger.
Excluirsó precisa entrar na pagina modelo > personalizar e escolher um template dinamico
Valeu filho...
ExcluirBrigadim!
Fabiano meu Filho...
ExcluirTem como colocar uma cor ou uma imagem de fundo?
infelizmente não tenho como testar isso pois não tenho blogs usando esse template.
Excluirmas veja no designer do modelo se tem a opção de trocar o background
Tem como mudar o plano de fundo sim Fabiano
ResponderExcluirAliás, tem muitos outros recursos.
Brigadim pela sugestão.
Bom dia!
ResponderExcluirOnde eu colo esse código?
Eu uso o blogger e tenho uma página dentro do bloco destinada para as fotos.
Desde já agradeço!
pode usar o código dentro de uma postagem ou da pagina que falou para montar a sua galeria.
ResponderExcluircaso o código não funcione veja nas configurações na pagina de postagem se está marcada a opção para executar o html (não mostrar literalmente)