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

Tweet

Posts Relacionados

Ampliar Imagens Com um Click

4 / 5

Por Áurea

Comentários