Bíblia no Computador

30 outubro 2010

jQuery Image Magnifier Blogger

Primeiramente vá ao site Dynamic Drive  e faça o download dos arquivos: 
hospede-os num site para pegar o endereço de publicação: dropbox é um bom hospedeiro:
 
Como de costume login em seu Painel do Blogger> Layout> Editar HTML e marque a opção "Expandir modelos de widgets" opção.antes do </head>

Importante passo: Agora, como medida de precaução faça o download do seu modelo para que você tenha um backup de emergência, se no caso de você criar algum erro:)

Primeiro coloque este código em seu modelo do Blogger.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="url_of_jquery_script">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

agora busca de ]]></ b: skin> e antes coloque o código abaixo:

dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
mgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(url_of_the_cursor_file), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

Você vai precisar de dois arquivos JavaScript para fazer este trabalho de ajuste para blogger zoom para imagens. Um script utilizado na ampliação da imagem e outro para o cursor para ser usado na imagem em foco, depois no gadget HTML coloque o código abaixo

<img class="magnify" magnifyby="3" style="width: 501px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUm_jsqg_Gmjk3wdM79UaNn767xJUJi0di2ZIaSPpP7NrPl1I_6hZPPlRKwRHhnSBLx-9-ivgfMlW0jj8HtwyqVf1_ojqBJV9M_EyM-S4-v5REyvtOA_2VTX0ocUaMUA0F7q7toNELBX2V/ List of Power Tweeting Tools.png" alt="jQuery Image Magnifier Blogger" id="BLOGGER_PHOTO_ID_5361650096596248578" border="0" />

Fonte: http://www.chethstudios.net/
Related Posts Plugin for WordPress, Blogger...

TV Novo Tempo em Campo Grande

TV Novo Tempo em Campo Grande
Canal 41