![Como Criar um Site ou Blog de sucesso [Fórum BlogsDox]](https://2img.net/i/fa/empty.gif)
Ampliar imagens com um clique Ter Jun 19, 2012 1:21 pm
blogsdox
ADMIN
Recurso que da um zoom na imagem quando você clica nela.
Vamos aos códigos:
1º- Acima da tag </head> adicione o código abaixo:
E para publicar as imagens com zoom basta fazer as postagens normalmente, porém na hora de colocar imagem coloque pelo código abaixo:
<img src="URL da Imagem" width="100" height="100" onclick="zoomToggle('100px','100px','200px','200px',this);">
Entendendo o código:
1º- O código em verde corresponde ao tamanho da imagem original, largura e altura.
2º- O que está de laranja corresponde respectivamente:
Vamos aos códigos:
1º- Acima da tag </head> adicione o código abaixo:
- Código:
<script>
// 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>
E para publicar as imagens com zoom basta fazer as postagens normalmente, porém na hora de colocar imagem coloque pelo código abaixo:
<img src="URL da Imagem" width="100" height="100" onclick="zoomToggle('100px','100px','200px','200px',this);">
Entendendo o código:
1º- O código em verde corresponde ao tamanho da imagem original, largura e altura.
2º- O que está de laranja corresponde respectivamente:
Largura da imagem original (deve ser a mesma do código em verde);
Altura da imagem original (deve ser a mesma do código em verde);
Largura da imagem ampliada;
Altura da imagem ampliada.
