Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigues

ampliar imagem loja virtual

Por , em ASP Clássico

Recommended Posts

Rodrigues    0

Rodrigues
Postado

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()
{
  if(navigator.userAgent.indexOf("MSIE") != -1)
  {
    return document.body.clientWidth;
  } else {
    return window.innerWidth;
  }
}

function windowHeight()
{
  if(navigator.userAgent.indexOf("MSIE") != -1)
  {
    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">
<!--
body {
	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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigues    0

Rodrigues
Postado

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;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

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">
Shadowbox.init({
    handleOversize: "drag",
    modal: true
});
</script>

Feito isso, agora so falta configurar a imagem. Lembrando que a sua imagem pequena tem que ser um link.

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito