LIGHTBOX EXAMPLE

LIGHTBOX EXAMPLE

This is the main content. To display a lightbox click here

FECHARCOLOQUE AQUI O CONTEÚDO

TopUp classes

Você pode implementar TopUp apenas adicionando uma classe TopUp a um elemento HTML. Há aulas TopUp vários dos quais você pode escolher.

Para TopUp com as configurações padrão, basta usar "top_up '. Você também pode compor a classe TopUp que especifica as definições TopUp certos.

Ao compor você pode especificar:

o layout ('db' para painel, "ql" para QuickLook, 'fl' para flatlook)
o tipo (ver documentação)
as dimensões (width'x'height)

A classe TopUp composto (os chamados 'coptions') tem de começar com 'tu_' seguido pelas configurações juntou com sublinhados.

Como exemplo, use 'tu_ql_iframe' para um TopUp com o "quicklooks 'layout e digite o" iframe ".

Por favor note que o uso de coptions influencia negativamente o desempenho do navegador no IE6 e IE7, por isso é recomendado para ativar o modo rápido. Ativando o modo rápido, sem (!) Digitando qualquer código Javascript está documentado aqui.






Open Google



<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script><br /> <br /> <br /> <a href="http://static.panoramio.com/photos/original/17487734.jpg" class="top_up"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="200" height="100"/></a><br /> <a href="http://static.panoramio.com/photos/original/17487734.jpg" class="tu_ql"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="200" height="100"/></a><br /> <a href="http://www.google.nl" class="tu_iframe_800x600">Open Google</a>

LIGHTBOX TopUp

Especificando uma predefinição TopUp é como especificar os atributos de estilo para um seletor de CSS na sua folha de estilo. A grande vantagem de usar presets é que ele fornece-lhe para manter o seu HTML todo (!) Limpo.

Basta ligar para TopUp.addPresets () com um hash como parâmetro.
A chave de cada entrada tem que ser um seletor CSS eo valor tem que ser um hash de toptions.

Assim, para ligações de agrupamento, apenas especificar grupo: [nome] na predefinição.

<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script><br /> <br /> <br /> <div id="examples"> <a href="http://www.fazendasanfrancisco.tur.br/pantanal/fotos/pantanal_onca_catia.jpg"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="200" height="100"/></a><br /> <a href="http://www.fazendasanfrancisco.tur.br/pantanal/fotos/pantanal_onca_catia.jpg"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="200" height="100"/></a><br /> <a href="http://www.fazendasanfrancisco.tur.br/pantanal/fotos/pantanal_onca_catia.jpg"><img alt="At Sunset" src=""width="200" height="100"/></a><br /> </div> <script type="text/javascript"> TopUp.addPresets({ "#examples a": { title: "Gallery {alt} ({current} of {total})", group: "examples", readAltText: 1, shaded: 1 } }); </script>

slideshow

Slideshow


<script type="text/javascript" src="http://slideshow.triptracker.net/slide.js"></script><br /> <script type="text/javascript"> <!-- var viewer = new PhotoViewer(); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); //--></script><br /> <a href="javascript:void(viewer.show(0))">Slideshow</a><br />

Lightbox

imagem ou texto

imagem ou texto









<style type="text/css"> <!-- #lightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;} #lightboxCaption{font-size: 0.8em;padding-top: 0.4em;} #lightbox img{ border: none; } #overlay img{ border: none; } #overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png);} * html #overlay{ background-color: #333;background-color: transparent;background-image: url(http://img43.imageshack.us/img43/3623/fundomg.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://img179.imageshack.us/img179/5197/loading.gif", sizingMethod="scale");} --> </style><br /> <script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/lightbox.js"></script><br /> <a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a><br /> <br /> As únicas coisas que precisa alterar aqui são os endereços das imagens ou texto e as legendas nesta linha.<br /> <a href=" COLOQUE AQUI O ENDEREÇO DA IMAGEM " rel="lightbox" title="minha legenda">imagem ou texto</a><br /> <a href=" COLOQUE AQUI O ENDEREÇO DA IMAGEM " rel="lightbox" title="minha legenda">imagem ou texto</a><br /> <a href=" COLOQUE AQUI O ENDEREÇO DA IMAGEM " rel="lightbox" title="minha legenda">imagem ou texto</a><br />

Efeito LightBox - Imagens em Destaque em tela cheira.
O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela.
clique pra abri a foto, depois clique na foto pra voltar normal





Efeito LightBox - Imagens em Destaque<br /> O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela<br /> <style type="text/css"> <!-- #lightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;} #lightboxCaption{font-size: 0.8em;padding-top: 0.4em;} #lightbox img{ border: none; } #overlay img{ border: none; } #overlay{background-image: url( COLOQUE AQUI O ENDEREÇO DA IMAGEM );} * html #overlay{ background-color: #333;background-color: transparent;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmU8dak3wFV9pl-stTu8MvTyYbcGt-_CwVaizEbym6EDuHamMbbcwVw98UJTcbUDuxcqrSlSfnZzfM67OECn85rSzsLtg7M1sEBxA6LUbEE0EF0kdAqtz_DETc6RJl_ZShH5NIctXKJak/s1600/sandy.jpg", sizingMethod="scale");} --> </style><br /> <script src="http://acessoriosparablogs.com.br/scripts/lightbox.js" type="text/javascript"> </script><br /> <a href="imagem em destaque" rel="lightbox" title="minha legenda"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " width="200" height="100" coloque aqui o texto " /> </a>

LIGHTBOX EXAMPLE COM CONTEÚDO

Isso é o conteúdo principal. Para exibir um clique lightbox

LIGHTBOX EXAMPLE
LIGHTBOX EXAMPLE

This is the main content. To display a lightbox click here

COLOQUE AQUI O CONTEÚDO FECHAR

<br /> LIGHTBOX EXAMPLE<br /> LIGHTBOX EXAMPLE</title><br /> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style><br /> </head><br /> <body><br /> <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p><br /> <div id="light" class="white_content">COLOQUE AQUI O CONTEÚDO <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">FECHAR</a></div><div id="fade" class="black_overlay"></div></body><br /> </html>

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<br /> <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><br /> <br /> <br /> <br /> <br /> <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.<br /> 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 /> <br /> <br /> <div class="onLight"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="60" height="50"/> <div class="offLight">Off</div><div class="lightBox"></div><div class="content"><br /> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="600" height="450" alt="funny dog" style="margin-left:0px;" /><br /> <br /> <br /> <br /> </div></div></div>