<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. Veja a demostração do código dessa galeria de imagens em funcionamento
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)
Link para esta página
45 comentários:
Adoro as tuas dicas, vou testar. Boa semana pra ti.
Excelente dica!
Obrigada, sempre, por dividir algo muito legal para os blogs!
Abraços,
Luka
Perfeito! PArabéns!
Bom dia caro.
o 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
uso 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.
vou 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:
igor
copiei 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.
Abraços.
Otima dica!
Tem 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:
<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.
Bjs 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
http://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...
onde eu colo esses códigos ? ?
Elias, esses códigos podem ser usados em uma postagem ou como um gadget de html/javascript(pagina layout)
ola 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!!!
lilian, só conheço o código marquee para fazer isso
http://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.
esdras
coloque 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
dannybiju
precisa 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.
Eu 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
Certo! 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
neste caso não tem como colocar links nas imagens
Olha me da uma dica rápida entao...
O 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.
as 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.
essa realmente é uma boa pergunta, mas somente os desenvolvedores dos programas poderiam responder.
sempre 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?
precisa hospedar as imagens no imageschack e depois montar o código
seu 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.
Twilight Fans
o 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
estou terminando de testar o código do lightbox, se der tudo certo amanhã vou publicar sobre isso.
Fabiano eu te amo aeiuieuiaeo
Olá Fabiano,
Coloquei 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
antes 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.
coloque o código desse jeito no lugar do link de texto
<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:
Você 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
vou 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?
Caren Araujo
infelizmente 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:
Dêem uma olhada, ficou como eu queria !!!
Valeu, galera !!!
Postar um comentário