Ampliar Imagens Com um Click

Este é um recurso que permite um ZOOM na imagem ao clicar sobre ela.



Para que ele funcione é necessário incluir um arquivo javascript no html do seu blog/site e colocar o endereço da imagem no código com alguns detalhes a +.

Veja só:

Adicione o código java antes da tag </ head>


<script type='text/javascript'>
// C.2004 by CodeLifter.com
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>

Em seguida adicione o código para publicar as imagens:

<img src="URL da Imagem" width="100" height="100" onclick="zoomToggle('100px','100px','200px','200px',this);">

Entenda o código:
1- width="100" height="100" correspondem ao tamanho da imagem antes de clicar, ou seja o tamanho que você vai colocar no seu post ou site. Aqui estão configurados para 100px por 100px, mas voce pode redimensionar como quiser;
2-'100px','100px','200px','200px' correspondem respectivamente:
1º Largura da imagem original (deve ser a mesma do código em verde);
2º Altura da imagem original (deve ser a mesma do código em verde);
3º Largura da imagem ampliada;
4º Altura da imagem ampliada.


Vi esta dica nos sites:
Vagabundia e CodeLifter
Ampliar Imagens Com um Click Ampliar Imagens Com um Click Reviewed by Áurea on 11/02/2008 Rating: 5

9 comentários:

  1. Olá, Áurea...Primeiramente tenho que dizer como adoro seu blog!!

    Um dos melhores...Junto com Templates e Acessorios vocês completam a gente com muitas dicas!

    Obrigada por isso...E seus templates são lindos!!!

    Pense...Quando eu comecei nem sabia que o blogspot tinha template!

    Bem...é o seguinte...resolvi transformar meu blog em site

    O site tá quase prontinho...

    Sendo que tenho que redirecioná-lo!!!

    Não quero perder as visitas

    Já varri todo o seu blog e não vi nada...

    Vc sabe como fazer isso?

    Agradeço se me responder!

    Obrigada

    ResponderExcluir
  2. I didn't know how else to contact you...
    I used one of your templates and made some changes to make it work for me. I would like to ask you how to make one more change as I do not know how to do this. I want to have a hyperlink that displays "Leave a Comment" under each post so that people know where to leave the comment. I am having trouble finding in the HTML code where to make this change and also need to know what code to enter. I hope you can help. Please check out my blog and let me know ...
    Thanks!
    Jeri

    jerimax@bellsouth.net

    ResponderExcluir
  3. Oi Áurea, passei pra te avisar que lá no meu blog tem novidade pra você... Espero você lá... Beijos!!

    ResponderExcluir
  4. Oi Aurea, adorei este novo template. Como faço para adquirir um igual ao seu?

    ResponderExcluir
  5. OLá amigo, tudo bom?

    Poderia me enviar um email de contato para que eu lhe possa enviar a pesquisa de controle de qualidade do dihitt?

    Atenciosamente,

    Dorly Neto
    Relações e Atendimento aos Blogueiros
    dorlyneto@dihitt.com.br

    ResponderExcluir
  6. É uma boa dica!
    Fica bem interessante com a imagem reduzida.
    Auxilia para reduzir o espaço.

    ResponderExcluir
  7. @Daison O Código das imagens é inserido quando você for colocar a imagem, seja no post ou na sidebar.

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.