LiVRe aFLuêNCia: Efeito Zoom com 'Fancy Zoom Script'

Este tutorial é uma tradução livre do post de Kang Rohman do Blogspot Tutorial.

Se você quer mostrar imagens grandes no blog, você terá dificuldades por causa das limitações da área do post ou da sidebar. Para resolver este problema, podemos usar várias maneiras.

Uma delas é descrita pelo Usuário Compulsivo no post 'Imagens grandes no editor do Blogger'. Outra é através do script 'Fancy Zoom'. Para usá-lo, coloque apenas uma pequena imagem no local onde quer que ela apareça: post, sidebar ou footer. Então, quando clicar na pequena imagem, ela será aumentada.

Veja o script em funcionamento clicando na imagem.

Para conseguir este efeito é necessário o script 'Fancy Zoom' (dããã). Atualmente, ele é usado no WordPress. Porém Kang Rohman testou (e eu também) no blogger, e funcionou bem (como você visualizou acima). Se você tem interesse neste efeito baixe e descompacte o arquivo abaixo e em seguida hospede-o num servidor que permita acesso direto e anote sua URL:

'Download - Fancy Zoom'

1ª ETAPA:

Acesse a edição de layout de seu template e na aba Editar HTML, faça uma cópia de segurança de seu template.
Não marque a opção Expandir modelos de widgets, e antes da tag </head> cole o código abaixo realizando as devidas substituições:

<script src="http://CAMINHO-DO-SITE-ONDE-HOSPEDOU-O-JAVASCRIPT/FancyZoom.js" type="text/javascript"></script>
<script src="http://CAMINHO-DO-SITE-ONDE-HOSPEDOU-O-JAVASCRIPT/FancyZoomHTML.js" type="text/javascript"></script>
</head>
Agora localize a tag <body> e substitua-a pelo seguinte código:

<body onload="setupZoom()">
Visualize, se tudo estiver ok, salve o template.

2ª ETAPA:

Baixe um imagem grande para seu servidor de imagens preferido e copie sua URL.

Agora coloque o código seguinte onde quer que apareça a imagem em miniatura (thumbnail).
<a href="URL-DA-IMAGEM"><img height="75" src="URL-DA-IMAGEM" width="100"/></a>

Os campos destacados em verde correspondem a altura e largura da imagem em miniatura e você pode alterá-los conforme sua necessidade.

Outra alternativa é hospedar duas imagens no seu servidor preferido de imagens: uma grande e outra pequena (com apenas parte da imagem original).
Espero que tenha gostado deste primeiro tutorial 'lego' (batizei-o com este nome para não dizer que sou 'leigo' no assunto.

Fonte: Blogspot Tutorial - Kang Rohman