valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier

JavaScript / CSS / DOM image zoomer - TJPzoom 3

IGREJA DE SANTA RITA

RUA DA PEDRA

Antiga estação de trem da cidade de Santa Rita Do Sapucai

PONTE DO RIO SAPUCAI

FONTE DA PRAÇA SANTA RITA

PRAÇA SANTA RITA

INATEL

Urna de Santa Rita de cassia

FAMILIA

PISCINA DO ALEMÃO, SÃO JOSE DO ALEGRE,MG Photographs
by kind permission of
ORKUT DO ALEX

a, a:visited, a:hover {}

#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:580px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #fc0;} 
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}

</style>

<a class="pics" href="#nogo" tabindex="1"><img class="thumb" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 5" width="80" height="80"title="  "alt="" />
<span><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 5" width="500" height="350" alt="Warm to Cold" title="Warm to Cold" /><br />NOME DA FOTO 5</span>
</a>
<a class="pics" href="#nogo" tabindex="1"><img class="thumb" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 6" width="80" height="80"title="  "alt="" />
<span><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 6" width="500" height="350"alt="Warm to Cold" title="Warm to Cold" /><br />NOME DA FOTO 6</span>
</a>
<a class="pics" href="#nogo" tabindex="1"><img class="thumb" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 7" width="80" height="80"title="  "alt="" />
<span><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 7" width="500" height="350"alt="Warm to Cold" title="Warm to Cold" /><br />NOME DA FOTO 7</span>
</a>
<a class="pics" href="#nogo" tabindex="1"><img class="thumb" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 8" width="80" height="80"title="  "alt="" />
<span><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 8" width="500" height="350"alt="Warm to Cold" title="Warm to Cold" /><br />NOME DA FOTO 8</span>
</a>
<a class="pics" href="#nogo" tabindex="1"><img class="thumb" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 9" width="80" height="80"title="  "alt="" />
<span><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 9" width="500" height="350"alt="Warm to Cold" title="Warm to Cold" /><br />NOME DA FOTO  9</span>
</a>
<a class="pics" href="#nogo" tabindex="1"><img class="thumb" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 10" width="80" height="80"title="  "alt="" />
<span><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM 10" width="500" height="350"alt="Warm to Cold" title="Warm to Cold" /><br />NOME DA FOTO 10</span>
</a>
<span class="info">Photographs<br />by kind permission of<br /><a href="http://www.orkut.com.br/Main#Profile?rl=ls&uid=16722932035841730760">OKUT DO ALEX </a></span>
</div></div>

<div class="gphoto-explore-widget-title">Fotos em destaque

</center>

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;}

#jsddm li a:hover
{ background: #24313C;}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;}

#jsddm li ul li
{ float: none;
display: inline;}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C;}

#jsddm li ul li a:hover
{ background: #8EA344;}
</style>

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>

<ul id="jsddm">
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">JavaScript</a>
<ul>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Drop Down Menu</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">jQuery Plugin</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Effect</a>
<ul>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Slide Effect</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Fade Effect</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Opacity Mode</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Drop Shadow</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Semitransparent</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">Navigation</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=891419917399964567&postID=8842496185027562571&from=pencil#">HTML/CSS</a></li>
<li><a href="http://noticiaeblog.com/">Ajuda </a></li>
</ul>

Painel

COLOQUE AQUI O conteúdo

orkut

Painel

COLOQUE AQUI O conteúdo
<img src="http://img7.orkut.com/images/milieu/1293431292/1303061522769/104637499/of/Zmpzhw0.jpg?ver=1303061522&sig=17ab5x3%20" /></div>
<a href="http://www.orkut.com.br/Main#Profile?uid=16722932035841730760">orkut</a>
<div class="slide">
<a class="btn-slide" href="http://www.blogger.com/post-edit.do#">Painel</a></div>

Eu amo lieb das ISTs RIM de Prússia/Preussen camisetas

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Produtos mais vendidos

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

<h2 id="homeProducts">
Produtos mais vendidos</h2>

</div>

</div>

</div>
<script src="http://www.zazzle.com.br/bld/z.2/js/library/Zazzle.Minimal.library.js?r=53.93080%7cDefault%7cbr%7cZazzleComBr%7cBRL" type="text/javascript">
</script><script type="text/javascript">
 

</script> 
<script src="http://www.zazzle.com.br/bld/z.2/js/library/Zazzle.Gallery.library.js?r=53.93080%7cDefault%7cbr%7cZazzleComBr%7cBRL" type="text/javascript">
</script> 
<script type="text/javascript">
 

</script></div>

slideshow de imagens versátil

Descrição: Um slideshow de imagens versátil, que pode ser visto em três maneiras: através de um menu drop down, para trás / frente do botão ou automaticamente. Cool! Exemplo:

This free script provided by JavaScript Kit Image Slideshow HTML Generator, faz o seu aqui slideshow de 12 FOTOS

<br /> Descrição: Um slideshow de imagens versátil, que pode ser visto em três maneiras: através de um menu drop down, para trás / frente do botão ou automaticamente. Cool!<br /><br /> <br /><br /> Exemplo:<br /><br /> <br /><br /> <br /><br /> <script language="JavaScript">  </script><br /><br /> <table border="0" cellpadding="0" cellspacing="0"><tbody> <tr>     <td><br /><br /> <form name="Oneslideform"><div align="center"><table border="1" bordercolor="#330099" cellpadding="4" cellspacing="0" style="width: 350px;"><tbody> <tr>               <td bgcolor="#330099"><br /><br /> <div align="center"><b><span style="color: white;">Image Slideshow</span></b></div></td>             </tr> <tr>               <td bgcolor="#ffffff"><br /><br /> <div align="center"><a href="javascript:Onetransport()"><img border="0" height="390" name="Oneshow" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM" width="390" /></a></div></td>             </tr> <tr>               <td bgcolor="#330099"><br /><br /> <div align="center"><select name="Oneslide" onchange="Onechange();">                     <option selected="selected" value="COLOQUE AQUI O ENDEREÇO DA IMAGEM">Image 1</option>                     <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM">Image 2</option>                     <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM">Image 3</option>         <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">Image 4</option>                     <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM">Image 5</option>                <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">Image 6</option>                     <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM">Image 7</option>                <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">Image 8</option>                     <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM">Image 9</option>            <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">Image 10</option>                     <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM">Image 11</option>    <option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">Image 12</option>                  </select></div></td>             </tr> <tr>               <td bgcolor="#330099"><br /><br /> <div align="center"><input onclick="Oneprevious();" title="Previous" type="button" value="<<" /><br /><br /> <input name="Oneslidebutton" onclick="Oneap(this.value);" title="AutoPlay" type="button" value="Start" /><br /><br /> <input onclick="Onenext();" title="Next" type="button" value=">>" /></div></td>             </tr> </tbody></table></div></form></td>   </tr> </tbody></table><br /><br /> This free script provided by<br /><br /> <br /><br /> <a href="http://javascriptkit.com/">JavaScript<br /><br /> Kit</a> <br />

Box Image Selector

Directions: Passo 1: Coloque o abaixo na seção da sua página: mylinks[0]="http://www.abcnews.com" mylinks[1]="http://www.cnn.com" "

/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script><table border="0" cellspacing="0" cellpadding="0">
<tr> <td width="100%"><form name="mygallery">
<p>
<select name="picture" size="1" onchange="showimage()">

<option selected value="COLOQUE AQUI O ENDEREÇO DA IMAGEM " />Picture of me

<option value=" COLOQUE AQUI O ENDEREÇO DA IMAGEM " />Picture of my aunt

<option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM" />Picture of my aunt

<option value="COLOQUE AQUI O ENDEREÇO DA IMAGEM" />Picture of my brother

</select>

</p>
</form>
</td> </tr>
<tr> <td width="100%"><p align="center">
<img src="me.gif" name="pictures" width="399" height="300" /></p></td> </tr>
</table>

Photo Slider II

Photo Slider II Descrição: Photo Slider II difere do original em que uma caixa de entrada é adicionado para permitir que você exiba uma descrição de cada slide abaixo. Ideal para exibição de fotos, por exemplo.

**Kevin's pet dog**

Start Over

<table border="0" cellpadding="0">
  <caption><strong>Kevin's pet dog</strong></caption>
  <tr>
    <td width="100%"><img src="plane1.gif" width="400" height="264" name="photoslider"></td>
  </tr>
  <tr>
    <td width="100%"><form method="POST" name="rotater">
      <div align="center"><center><p>

/*
Photo Slider II- By Kevin Adams (kadams@kyk.net)
For this script and more
Visit http://www.javascriptkit.com
*/

var photos=new Array()
var text=new Array()
var which=0
var what=0

//Change the below variables to reference your own images. You may have as many images in the slider as you wish
photos[0]="plane1.gif"
photos[1]="plane2.gif"
photos[2]="plane3.gif"
photos[3]="plane4.gif"
photos[4]="plane5.gif"

//change coresponding description
text[0]="B2 Stealth Bomber"
text[1]="F15 Tom Cat!"
text[2]="Russian Su27 Fighter Jet"
text[3]="Some training jet."
text[4]="Commerical Airliner"

window.onload=new Function("document.rotater.description.value=text[0]")

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}

function type()
 {
 alert("This textbox will only display default comments")
 }

</script>
<p><input type=text name="description" style="width:400px" size=50>

<p><input type="button" value="<<Back" name="B2"
      onClick="backward()"> <input type="button" value="Next>>" name="B1"
      onClick="forward()"><br />
      <a href="#" onClick="which=1;what=1;backward();return false">Start Over</a></p>      </center></div>    </form>    </td>
  </tr>
</table>

Efeito LightBox imagem ou texto

imagem ou texto imagem ou texto

As únicas coisas que precisa alterar aqui são os endereços das imagens ou texto e as legendas nesta linha.
<a href=" COLOQUE AQUI O ENDEREÇO DA IMAGEM " rel="lightbox" title="minha legenda">imagem ou texto</a>
<a href=" COLOQUE AQUI O ENDEREÇO DA IMAGEM  " rel="lightbox" title="minha legenda">imagem ou texto</a>
<a href=" COLOQUE AQUI O ENDEREÇO DA IMAGEM  " rel="lightbox" title="minha legenda">imagem ou texto</a>

efeito LightBox - Imagens em Destaque em tela cheira.

Efeito LightBox - Imagens em Destaque em tela cheira. O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela. clique pra abri a foto, depois clique na foto pra voltar normal

Efeito LightBox - Imagens em Destaque
O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela
<style type="text/css">

</style>
<script src="http://acessoriosparablogs.com.br/scripts/lightbox.js" type="text/javascript">
</script>
<a href="imagem em destaque" rel="lightbox" title="minha legenda"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " width="200" height="100" coloque aqui o texto " /> </a>

Fazer Apresentação de Slides com Banners

Veja aqui uma demostração no site com uma apresentação de slides de foto

Dicas
Frases
Frases
Frases
Frases

PRA FAZE MAIS SLIDES DE FOTO E SÓ COLOCAR O CÓDIGO ABAIXO DENTRO DO HTML ACIMA DO AAAAAAAAAA

http://paraiso.etfto.gov.br/biblioteca/material/info/des_web/tutorial/marquee/marquee2.htm">

CLIQUE FOTO

Você coloca um "link" e quando clica aparece foto que vai aumentando pela página, bem legal!!

Clique aqui !!

Para colocar o efeito CLIQUE FOTO no blogger . No blog clique em design e escolha a opção "adicionar um gadget". Vai abrir um popup com várias opções. Escolha a opção HTML/JavaScript e cole o código COPIAR

<div dir="ltr" style="text-align: left;" trbidi="on">
Você coloca um "link" e quando clica aparece foto que vai aumentando pela página, bem legal!!
<script language="JavaScript" type="text/javascript">
/**********************************************************************************   
ZoomFade 
*   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> 
*********************************************************************************/

function lib_bwcheck(){ //Browsercheck (needed)
 this.ver=navigator.appVersion
 this.agent=navigator.userAgent
 this.dom=document.getElementById?1:0
 this.opera5=this.agent.indexOf("Opera 5")>-1
 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
 this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
 this.ie=this.ie4||this.ie5||this.ie6
 this.mac=this.agent.indexOf("Mac")>-1
 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 this.ns4=(document.layers && !this.dom)?1:0;
 this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
 return this
}
var bw=new lib_bwcheck()

/*Here are the variables you have to set, play with different values:                                                                 
First the text: (it will stop and fade/change the colors on the last one)*/
zText=new Array('<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "> </a>','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">','<img src=" COLOQUE AQUI O ENDEREÇO DA IMAGEM ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM  ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM  ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM  ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM  ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">')
  
//Now the colors:
//all you have to do is set the color you want to have in here: 
//(the first color will be the color that the text is when it zooms.)
zColor=new Array('#000000','#000000','#ff00cc','#000000','#FF00CC')
 
var zEndSize=70   //The fontsize in px you want the zoom to end at
var zSpeed=40     //Zoom speed
var zAddSize=5    //Px to add to the fontsize on each interval
var zFadeSpeed=70 //Color change/fade speed
var zFont='arial black,arial,helvetica,sans-serif' //Font
var zHide=true    //do you want it to hide when its done? (true or false)
var zHideWait=70  //Time to wait before hiding
var zStartSize=10 //The size to start at
var zEndCode=""   // Code to execute when the zoom and fade is finished. ie: "location.href='newpage.html', executes when the hide does.

/*You can remove this if you don't wan't it to start right away.
You can have it start if someone clicks a link (make a link like this:
<a href="#" onclick="fadeInit()">Click to Zoomtext</a>)*/
//onload=zoomInit;

/********* You shouldn't really have to set anything below this point ***********/

//Object functions
function makeZoomObj(obj,font,size,endsize,color,text,zspeed,fadespeed,addsize,hide,hidewait,endcode){
    this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?document.layers[obj]:0; 
    this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj].document:0; 
 this.zoomWrite=b_zoomWrite; this.zoomIt=b_zoomIt; this.fadeIt=b_fadeIt; this.zoomFade=b_zoomFade;
 this.font=font; this.color=new Array(); this.color=eval(color); this.text=new Array(); this.text=eval(text);
 this.zspeed=zspeed; this.fadespeed=fadespeed; this.addsize=addsize; this.endcode=endcode
 this.hide=hide; this.hidewait=hidewait; this.size=size; this.startsize=size; this.endsize=endsize
 if(size<endsize){this.way="<"; this.addsize=this.addsize
    }else{this.way=">"; this.addsize=-this.addsize}
 if(bw.dom || bw.ie4){ //Setting the style properties
  this.css.fontFamily=this.font; this.css.fontSize=this.size+"px"; this.css.color=this.color[0]
 }
 this.obj = obj + "Object";  eval(this.obj + "=this"); return this
}
function b_zoomFade(num){
 if(num<this.text.length){
  this.size=this.startsize
  this.zoomIt(num,'this.zoomFade('+(num+1)+')')
 }
 else if(num==this.text.length) this.fadeIt(0,'this.zoomFade('+(num+1)+')')
 else if(this.hide) setTimeout(this.obj+".css.visibility='hidden'; eval("+this.obj+".endcode)",this.hidewait)
}
function b_zoomWrite(num,cnum){
 if(bw.ns4){
  this.writeref.write('<span style="text-align:center; font-size:' +this.size+'px; font-family:'+this.font+'; color:'+this.color[cnum]+'">'+this.text[num]+'</span>')
  this.writeref.close()
 }else this.writeref.innerHTML="<center>"+this.text[num]+"</center>"
}
function b_zoomIt(num,fn){
 if(eval(this.size+this.way+this.endsize)){
  if(this.size==this.startsize || bw.ns4) this.zoomWrite(num,0)
  if(bw.dom || bw.ie4) this.css.fontSize=this.size+"px"
  this.size=this.size+this.addsize
  setTimeout(this.obj+".zoomIt("+num+",'"+fn+"')",this.zspeed)
 }else eval(fn) 
}
function b_fadeIt(num,fn){
 if(num<this.color.length){
  if(bw.ns4) this.zoomWrite(this.text.length-1,num)
  else this.css.color=this.color[num]
  num++
  setTimeout(this.obj+".fadeIt("+num+",'"+fn+"')",this.fadespeed)
 }else eval(fn) 
}
/*Initiates the object, shows it and starts the zoom
****************************************************************************/
function zoomInit(){
 if(bw.bw){
  oZoom=new makeZoomObj('divZoom',zFont,zStartSize,zEndSize,'zColor','zText',zSpeed,zFadeSpeed,zAddSize,zHide,zHideWait,zEndCode)
  oZoom.zoomFade(0)
  oZoom.css.visibility='visible'
 }
}
</script>
<div align="center" id="divZoom">
</div>
<a href="http://www.blogger.com/post-edit.do#" onclick="zoomInit(); return false">Clique aqui !!</a>
</div>

Quando passar o mouse na foto em miniatura fazer com que abra a foto maior no local desejado.

Para colocar o efeito foto no blogger . No blog clique em design e escolha a opção "adicionar um gadget". Vai abrir um popup com várias opções. Escolha a opção HTML/JavaScript e cole o código COPIAR O

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
function exibir1(img)
{
document.getElementById("exibe").src= img
}
</script>
<center>
<img alt="" height="400px" id="exibe" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " width="700px" />

Para colocar o efeito foto deslizante no blogger . No blog clique em design e escolha a opção "adicionar um gadget". Vai abrir um popup com várias opções. Escolha a opção HTML/JavaScript e cole o código COPIAR O CÓDIGO AQUI

.galeria {
	width: 800px;
	height: 210px;
	float: left;
}

.foto {
	float: left;
	width: 150px;
	overflow: hidden;
	margin: 0 10px 5px 0;
	-webkit-transition: width 1s ease-in; 
	-moz-transition: width 1s ease-in; 
	-o-transition: width 1s ease-in; 
}

.foto:hover {
    width: 310px;
}
</style><div class="corpo">

EFEITO FOTO

Efeito foto deslizante Baralho Para colocar o efeito foto deslizante no blogger . No blog clique em design e escolha a opção "adicionar um gadget". Vai abrir um popup com várias opções. Escolha a opção HTML/JavaScript e cole o código COPIAR O CÓDIGO

----------------------------------------------------

Efeito de foto

menu do blog

Clique para visualizar

Clique novamente para ocultar

Clique para visualizar

Clique novamente para ocultar

JavaScript / CSS / DOM image zoomer - TJPzoom 3

JavaScript / CSS / DOM image zoomer - TJPzoom 3

Painel

Produtos mais vendidos

slideshow de imagens versátil

Box Image Selector

Photo Slider II

Efeito LightBox imagem ou texto

efeito LightBox - Imagens em Destaque em tela cheira.

Fazer Apresentação de Slides com Banners

CLIQUE FOTO

FOTO EXPA

Quando passar o mouse na foto em miniatura fazer com que abra a foto maior no local desejado.

EFEITO FOTO

Seguidores

Quem sou eu