teste para site: Lightbox

Enquanto a imagem em miniatura menores é exibida em seu post, a imagem correspondente maior é mostrada dentro de uma janela flutuante somente quando o leitor passa a sua / seu cursor do mouse sobre a miniatura da imagem. Exibir a imagem de estilo dentro da janela flutuante é exatamente igual a de uma visão através de uma lente de aumento ou de uma visão microscópica. Para se ter uma idéia clara do hack, Confira a demonstração ao vivo ... (em um blog no Blogger). DEMO e outra independente Agora siga estas instruções para adicionar este hack para seu blog Blogger / BlogSpot: PASSO # 1 Efetuar login no Blogger e vá para Layout -> Editar HTML então, encontrar (CTRL + F) este código em seu modelo: E imediatamente ACIMA / antes dela, cole este código:
>

<br />

<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
    
    <script type="text/javascript">

$(function() {
    var options =
    {
    zoomWidth: 275,
    zoomHeight: 275
    }
    $(".jqzoom").jqzoom(options);

var options2 =
    {
    zoomWidth: 275,
    zoomHeight: 275,
    zoomType:'reverse'
    }

$(".jqzoom2").jqzoom(options2);

});
    </script>

Lightbox, Mover o mouse sobre imagem off para ligar o lightbox

Pure CSS Light Box Example - Devin Olsen

Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira. Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.

Off

Pure CSS Light Box Example - Devin Olsen
<style type="text/css">
html,body{height:100%;}

#box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:30px; border:#333333 dashed; border-width:1px; padding:10px;}

.onLight {padding:2px; width:20px; background:#000000; border:#333 solid; border-width:1px; cursor:pointer;}
.onLight:hover div, .offLight {display:block;}

.offLight {padding:2px; z-index:200; width:25px; background:#333; border:#333 solid; border-width:1px; position:absolute; top:560px; right:310px; display:none;  cursor:pointer;}
.offLight:hover + .lightBox {display:none;}

.lightBox {width:100%; height:100%; float:left; position:absolute; z-index:100; background-color:#000000;  top:0px; left:0px; right:0px; display:none; cursor:default; 
opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/
filter: alpha(opacity=80); /*FOR IE7*/
}

.content {width: 600px; height: 460px; border: solid 2px #fff; background: #ccc; margin:20px auto; position:absolute; z-index:200; top: 30px; display:none; padding:20px;}

h2 {margin:0px;}
</style>

<div id="box">
Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.
Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.<br />

teste para site

Produtos mais vendidos

Páginas

A simple CSS photo-album

Example

Single Images

Lightbox, Mover o mouse sobre imagem off para ligar o lightbox

sábado, 6 de agosto de 2011

Lightbox

Nenhum comentário:

Postar um comentário

Seguidores

Arquivo do blog

Quem sou eu