Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
olá galera como fazer aquele sistema de ampliaç]ao de imagem que TELA FICA ESCURA DE FUNDO E A GENTE VAI VENDO TODA SEQuencia das fotos do produto? Da para eu adaptar no meu? segue abaixo o meu amplia.asp
<html>
<head>
<title>-| Ampliar Imagem |-</title>
<script>
function windowWidth() return document.body.clientWidth;
} else {
return window.innerWidth;
}
}
function windowHeight() return document.body.clientHeight;
} else {
return window.innerHeight;
}
}
function format_window(img, preload) img = document.getElementById(img);
preload = document.getElementById(preload);
preload.style.display = "none";
img.style.display = "inline";
window.resizeBy(img.width - windowWidth(), img.height - windowHeight());
x = (screen.width - windowWidth()) / 2;
y = (screen.height - windowHeight()) / 2;
window.moveTo(x,y);
}
</script>
<style type="text/css"> margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
}</style></head>
<body onLoad="format_window('img','preload')" style="background: white">
<div id="preload">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td align=center><span class="pretom-10 style1"><b>Carregando imagem...<b></span></td>
</tr>
</table> </td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td style="padding: 10px;" bgcolor="#F1F5F8" align=center><img src="layout/imagens/carregando.gif" width="90" height="13"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
</table>
<blockquote> </blockquote>
</div>
<a href="javascript: window.close()"><img id="img" src="<%=request("scr")%>" style="display: none" border=0 alt="Clique para fechar!"></a>
</body>
</html>Valeu
>
cara você tem que usar lightbox, lightwindow, para isso, da uma pesquisada no forum.
Como o Zeke_ mesmo disse, voce tambem pode usar a "Shadowbox" é bem simples de configurar..... entra no link Shadowbox
galera peguei o shadow box mas como faço para ligar o codigo a ampliação das imagens da minha loja? tenho que configurar isso na pagina amplia.asp ou na pagina que manda clicar p ampliar? O codigo do shandow é esse abaixo
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
Opa, voce nao vai colocar os codigos dos dois arquivos na sua aplicacao asp não..
Vou passar um passo a passo aqui:
1º tem que baixar o arquivo shadowbox-3.0.3.zip pelo site
2º descompacta o arquivo para dentro de uma pasta do seu controle
3º voce tem que chamar o arquivo css e js da seguinte forma.
<link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css" />e
<script type="text/javascript" src="shadowbox/shadowbox.js" language="javascript"></script>Em seguida dentro do head do html voce vai colocar o seguinte codigo.
<script type="text/javascript">});
</script>Vai ficar da seguinte forma
<a href="img/img1grande.jpg" rel="shadowbox" title="Exemplo do ShadowBox">
<img src="img/img1.jpg" border="0" />
</a>No mais é isso ai brother até mais
cara você tem que usar lightbox, lightwindow, para isso, da uma pesquisada no forum.