Esquema de imagens da globo.com

[zedasmuie 0]

ae rapaziada blza?

entao

aquele eskema das fotos no site da glob.. que você clica ela amplia tipo com um zoom..

alguem sabe como faz?

 

um exemplo

http://g1.globo.com/Noticias/Brasil/0,,MUL41161-5598,00.html

 

vlwww

[Otata 4]

então provavelmente eles utlilizam dojo...framework eh bem facilfazer isso com o dojo...Abraço!

[Lab Design 0]

É somente um layer que geralmente é colocado no final da pagina com o style.display=none mas ele tem todos os outros atributos setados como top, lef, widh, height e quando o usuario clicar no link, é alterado o status do display para inline ou block e quando ele clicar no "X" para fechar é alterado novamente o status do display para none:veja abaixo um exemplo:em javascript que mostra ativa o layer

function changeDisplay(id) { var div = document.getElementById(id); if (div.className=='invisivel') { div.className='visivel'; } else { div.className='invisivel'; } }

a funcao recebe o ID do layer e funciona como uma chave liga-desliga agora a class invisivel e visivel que devem estar ou na pagina ou num arquivo de style

.visivel { display:inline; } .invisivel { display:none; }

e no html<img src="imagetal.jpg" onclick="changeDisplay('layerTal')">no final da pagina:<div id='layerTal' style='postion:absolute; left:100px; top:100px; width:250px;height:280px' class='invisivel'> <div style="width:250px; text-align:right">Fechar [<a href="java script:void(null)" onclick="changeDisplay('layerTal')">x</a>]</div><img src='imagetalMaior.jpg'></div>Veja que o style do div acima poderia estar tambem no arquivo de css e no html usuaria somente do id e o class.

[Alex Hiroshi 7]

Lightbox.

[Lab Design 0]

Você tem razão eu não tinha atentado ao fato da pagina embaixo ficar escura.

[Lab Design 0]

Lex só pra documentar eu entrei no link da globo e no link que voce informou e resolvi fazer à minha maneira:

 

1) no arquivo de style:

 

.visivel { display:inline; }

 

.invisivel { display:none; }

 

#overlay{

position: absolute;

top: 102px;

left: 0;

z-index: 90;

width: 777px;

height: 689px;

background-color:#000;

opacity:0.8;

-moz-opacity: 0.8;

filter: alpha(opacity=80);

}

defini o começo da máscara logo abaixo do topo do site:

como o site está em ajax, e a primeira pagina é a home.html eu coloquei na home a função js pra fechar o layer chamado destaque que inicia aberto pois trata-se de uma promoção.

 

function closeLayer() {

var lyr = document.getElementById('destaque');

var ovr = document.getElementById('overlay');

lyr.className='invisivel';

ovr.className='invisivel';

}

Como o layer é o último elemento da página, eu criei o div overlay como ultimo elemento.

 

<style>

#destaque {

position:absolute;

top:150px;

left:250px;

width:200px;

z-index:99}

 

#tabela {

color:#000;

background:#fff;

border:1px solid #888

}

 

#tabela b{color:#004d6f}

 

</style>

 

<div id="destaque" class="visivel">

<table id="tabela" cellPadding="0" cellSpacing="0">

<tr>

<td align="right" style="background:url(images/title_bg.jpg) repeat-x">

<img src="images/close.jpg" style="cursor:pointer" onclick="closeLayer()">

<tr>

<td align="center">

<img src="images/oportunidade.png">

<tr>

<td align="center" bgcolor="#000000">

<a href="java script:maisInfo(<?= $id ?>)" style="border:0">

<img src="includes/mini.php?img=../<?= $image ?>&wh=200" border="0" style="margin:8px">

</a>

<tr>

<td align="center" style="background:#fff; padding:4px 0">

Ref.: <?= $ref_imovel ?><br>

<?= $finalidade ?>:

<b><?= $result['tip_imovel'] ?></b><br>

<?= $result['cidade'] ?> / <?= $result['bairro'] ?><br>

<?= $dorms ?><br>Preço:

<b style="font-size:12pt"><?= $val ?></b>

</tr>

</tr>

</table>

</div>

 

<div id="overlay" class="visivel"></div>

O onclick na imagem do 'X' fechar o layer e altera o style do div overlay, poderia tambem ser criado dinamicamente do div overlay no inicio da pagina e feito um removeChild no closeLayer.

 

A única coisa que não consegui resolver é que tenho dois selects na home e eles ficam acima da mascara no IE6 mas no FF normal.

 

Testes no FF Mozilla

Testes no IE 6 talvez no 7 funcione normal porque me parece que ele tá mais compatível

 

 

Isso também foi resolvido colocando:

 

<select style="width:120px" size="1" name="tipoimov" id="tipoimov" class="invisivel">

<select name="dorms" id="dorms" id="dorms" class="invisivel">

 

e completando o JS acima:

 

function closeLayer() {

document.getElementById('destaque').className='invisivel';

document.getElementById('overlay').className='invisivel';

document.getElementById('tipoimov').className='visivel';

document.getElementById('dorms').className='visivel';

}

 

Bom eu não implementei no site do cliente ainda pois preciso mostrar ainda pra ele e parece que faltando algumas fotos de destaque la no site.