Quick look

[wellington .ws 0]

bom dia gostaria de saber se alguem pode me ajudar estou com um problema eu quero criar uma pré visualizaçao do conteudo de minha pagina tipo este Clique aqui quicklook

 

ja procurei muito e não encontro nada obrigado desde ja

[merlinus 1]

você quer o que exatamente? que apareça o Quick Look quando o mouse está em cima?

isso é javascript, dá um analizada no codigo da pagina que ele aparece, é um js alem dos meus conhecimentos mas está lá.

[wellington .ws 0]

sim mas qundo você clica no quick look aparece uma pre visualizaçao confira la

[goruks 0]

a previsualização é janela modal:

 

http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/

http://www.maujor.com/blog/pg_apoio/modal/jquery-modal-window.html

 

outras opções:

http://leandrovieira.com/projects/jquery/lightbox/

http://defunkt.io/facebox/

 

é essa <div class="overlay"> que muda quando você passa o mouse

 

 

#content{ margin-top:20px; float:left;  position:relative;} 	  	    	  	
.products{width:712px; padding-left:39px; margin-top:0; }
.products .productstart{ width:173px; }
.products .product,.products .productstart{ width:178px; margin-bottom:18px;  }
img.productImage, .graphicblock{ width:173px; height:216px; }

.topHeader{ padding-left:39px; margin-bottom:5px; width:707px; overflow:hidden; }
#breadcrumb{ width:568px; padding-left:2px;}
.pageset{ width:368px; padding-right:2px; }
#content .pageset{ width:370px; padding:0; padding-left:408px;}

.productstart .overlay, .product .overlay { top: 199px; width: 173px; padding-left:3px; }

div.products div.qv-tip { display:none; position:absolute; height:19px; top:199px; left:3px; z-index:3;}

div.products div.hover div.qv-tip { display:block; cursor:pointer; width:173px; background:transparent url(/category/quicklook/quicklook_173.png) 0px 0px no-repeat;}

 

 

 

<div id="cprod801400155Overlay" class="product">
<div class="qv-tip" product_id="cprod80140015"></div>
<div class="overlay">
<img class="flagimg" onerror="shimImage(this)" src="/category/templates/productFlag/mt/new_overlay.png">
</div>
<a class="prodImgLink" href="/store/catalog/prod.jhtml?itemId=cprod80140015&parentId=cat11350734&masterId=cat000092&index=4&cmCat=cat000000cat000089cat000092cat11350734" onclick="s_objectID="http://www.horchow.com/store/catalog/prod.jhtml?itemId=cprod80140015&parentId=cat11350734&masterI_1";return this.s_oc?this.s_oc(e):true">
<img id="pImagecprod801400155" class="productImage" style="" onerror="this.src='/store/nav/images/shim.gif'" title="H5LS9 "Josiah" Branch Mirror" alt=""Josiah" Branch Mirror" src="http://images.horchow.com/products/mt/HCH5LS9_mt.jpg">
</a>
<p>
<p class="priceadorn">225.00</p>
</div>

[wellington .ws 0]

ok grato mais uma pergunta tem como fazer uma pre visualizaçao da pagina do conteudo que iria aparecer como esta que postei o linck

mas eu quero so lugares especificos nao a pagina toda