Jump to content


Photo

Que Código é Esse?


  • Faça o login para participar
106 replies to this topic

#1 Rods

Rods

    Normal

  • Usuários
  • 64 posts
  • Sexo:Não informado
  • Localidade:São Paulo
  • Interesses:SEO, CSS, tableless, deign, arte, javscript, trenologia, desenvolvimento

Posted 16/02/2007, 09:08

Olá, amigos...

Bem, eu vi hoje nesta página uma espécie de pop-up que me chamou bastante atenção. Clique numa das imagens da matéria e verá...

Alguém pode me dizer qual é o nome disso e me passar o código certinho? trabalho numa redação de jornal e isso seria bem interessante de se usar. Por exemplo, destacar um parágrafo de alguma notícia...

espero ter postado no lugar certo, caso contrário, moderador me desculpe!

Agradeço a ajuda..
abraços (y)
Semântica Web - Sites otimizados e SEO
www.semanticaweb.com.br

#2 Paulo André

Paulo André

    Why so serious?

  • Ex-Admins
  • 5114 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte - MG
  • Interesses:O.Q.F.J.?

Posted 16/02/2007, 09:28

http://www.huddletog...ects/lightbox2/

Funciona perfeitamente em qualquer browser.. o cara desse site ai que você passou que deve ter bixado o código fazendo não funcionar no Firefox.

PS. não sei porque mas agora funcionou no FF também. :P

Flws...
(ok2)Até mais

Edição feita por: Paulo André, 16/02/2007, 09:30.

Paulo André G Rodrigues,
ex-administrador Fórum WMO.


www.CanalDev.com.br

#3 Rods

Rods

    Normal

  • Usuários
  • 64 posts
  • Sexo:Não informado
  • Localidade:São Paulo
  • Interesses:SEO, CSS, tableless, deign, arte, javscript, trenologia, desenvolvimento

Posted 16/02/2007, 10:22

Opa! valeu Paulo! acho q isso deve resolver...vou testar aqui e depois falo se deu certo...brigadão

Ai, Paulo, testei aqui e consegui!
esse link q vc passou é muito fácil de se aprender e realmente funciona em todos os browsers...
vc sabe se isso é muito usado? pq eu n vejo isso em, sites por ai..

obrigado pela ajuda

abraço
Semântica Web - Sites otimizados e SEO
www.semanticaweb.com.br

#4 TTC_VeNdEdOr

TTC_VeNdEdOr

    Curioso

  • Usuários
  • 433 posts
  • Sexo:Masculino
  • Localidade:João Pessoa - PB

Posted 18/02/2007, 08:44

e se eu quiser por no link de downloads da minha pagina, ai aparecer uma imagem e logo depois redirecionar pra propria pagina de downloads, tem como?

tem como inserir links nas figuras?
Age of Empires III - www.ageofempires3.com.br
Age of Empires II - www.ageofempires2.com.br
NÃO RECOMENDO: Levei calote da hospedagem BRWebs, assim que paguei cancelaram e não devolveram :/

#5 Rods

Rods

    Normal

  • Usuários
  • 64 posts
  • Sexo:Não informado
  • Localidade:São Paulo
  • Interesses:SEO, CSS, tableless, deign, arte, javscript, trenologia, desenvolvimento

Posted 06/03/2007, 10:59

olá

O lightbox funcionou na minha página, porém com um pequeno erro:
As imagens "close" e a imagem "carregando" ficam quebradas...a foto abre normal, mas esse pequeno erro acaba desorientando o usuário na hora de fechar...

espero que possa me ajudar, obrigado
Semântica Web - Sites otimizados e SEO
www.semanticaweb.com.br

#6 knoxville

knoxville

    Backdoor Man

  • Usuários
  • 951 posts
  • Sexo:Masculino
  • Localidade:Itajaí - SC

Posted 12/03/2007, 15:15

Rods, você deve editar o arquivo .css, é nele que está o caminho para estas imagens

tenho uma dúvida... como faço para usar um arquivo que nao seja uma img??? ou seja... o link abre uma pagina html, asp, qlq extensão...
brigadão!!!

#7 Rods

Rods

    Normal

  • Usuários
  • 64 posts
  • Sexo:Não informado
  • Localidade:São Paulo
  • Interesses:SEO, CSS, tableless, deign, arte, javscript, trenologia, desenvolvimento

Posted 13/03/2007, 09:30

Deu tudo certo agora...obrigado pessoal
Semântica Web - Sites otimizados e SEO
www.semanticaweb.com.br

#8 PauloCrow

PauloCrow

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 15/07/2007, 04:25

EDITADO...

Eu também queria que abrisse outras paginas sem falar que também queria um botão para ir passando as imagens, mas encontrei uma nova versão que faz tudo isso ai, é só abrir o link...

http://www.dolem.com/lytebox/



Agora vamos a um breve guia:


No Topo da pagina que vai se abrir o LyteBox coloque essa linha...
Veja que tem o ( margin:0 auto ) isso serve pra não ficar uma faixa branca na lateral junto a barra de rolagem, ou seja, ele realmente vai cubrir tudo!

&lt;script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<BODY style="margin:0 auto"></BODY>




Agora para colocar uma imagem comum, não tem segredo é só incluir essa linha:

<a href="imagem_1.jpg" rel="lytebox" title="Image Description">Imagem 1</a>




Agora esse é pra grupos de imagem.
ele ajuda a passar pelas imagens sem precisar fechar o LyteBox:

<a href="images/1-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Imagem 1</a>
<a href="images/1-2.jpg" rel="lytebox[vacation]" title="My Sister">Imagem 2</a>






Esse é para Slide com opção de pausa e continuar:

<a href="images/1-2.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Imagem 1</a>
<a href="images/1-3.jpg" rel="lyteshow[vacation]" title="My Sister">Imagem 2</a>




Essa linha é para paginas fora do seu site.
Perceba que tem como ajustar largura e altura tranquilamente:

<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 700px; height: 480px; scrolling: no;">Google</a>



E pra finalizar, o que mais gostei, vc coloca varias paginas e pode ajustar tamanho individualmente e tem opção de Proxima e Anterior, fica passando pelas paginas, otimo pra quem tem tutorial por exemplo ou precisa mostrar um contrato antes da pessoa se registre:

<a href="contrato.html" rel="lyteframe[catalog]" title="Contrato" rev="width: 700; height: 480; scrolling: no;">Pagina 1</a>
<a href="registro.html" rel="lyteframe[catalog]" title="Formulario de registro">Registro</a>



Bom é isso ai, espero que gostem pois eu fiquei de boca aberta aqui com essa ferramenta.

vlw

Edição feita por: PauloCrow, 15/07/2007, 06:31.


#9 Raphaell

Raphaell

    Normal

  • Usuários
  • 80 posts
  • Sexo:Masculino
  • Localidade:Recife/PE
  • Interesses:Tableless, CSS, XHTML, Flash, ActionScript, Photoshop, Fireworks, Teoria das cores, Webdesign.

Posted 24/07/2007, 10:09

O código seria JavaScript !

:P !
Raphael Taveira Webdesigner
Avaliação (x)HTML, CSS & Visual.
Ocupado com projeto !!!
"Minhas seções": CSS & Semântica(Tableless)

Contato: raphaelstrous@yahoo.com.br

#10 Paulo André

Paulo André

    Why so serious?

  • Ex-Admins
  • 5114 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte - MG
  • Interesses:O.Q.F.J.?

Posted 24/07/2007, 11:47

@ PauloCrow

O Lightbox 2 tem um botão para ir passando as imagens sim. Ao abrir uma e posicionar o mouse do lado direito ou esquerdo da imagem, aparecerá. ;)

Mas depende de você colocar lightbox[roadtrip] na propriedade rel do link.

Flws...
(y)Até mais
Paulo André G Rodrigues,
ex-administrador Fórum WMO.


www.CanalDev.com.br

#11 pLatik

pLatik

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 20/11/2007, 16:59

hei pessoal!!

será que alguém me poderia ajudar a implementar o lytebox, passando variáveis através de um form para o iframe que abre junto com o lytebox? o meu código é o seguinte:

<script language="JavaScript" type="text/JavaScript">

function startLytebox(href, title, rel, rev) {
var el = document.getElementById('lytebox_misc');
el.href = href;
el.title = title;
el.rel = rel;
el.rev = rev
myLytebox.start
}
</script>

<a href="minha_url" rel="lyteframe" rev="width: 850px; height: 500px; scrolling: no;" title="Some Title" id="lytebox_misc" onclick="startLytebox(this.href, this.title, this.rel, this.rev);">

<input name="submit" type="image" src="../imagens/submeter.gif">

</a>

tentei "buscar" o valor inserido por o utilizador dessa forma:

<a href="minha_url?Cidade='document.form1.wCidade.value;'" rel="lyteframe" rev="width: 850px; height: 500px; scrolling: no;" title="Some Title" id="lytebox_misc" onclick="startLytebox(this.href, this.title, this.rel, this.rev);">

<input name="submit" type="image" src="../imagens/submeter.gif">

</a>

os valores são passados através de selectbox, alguém que me ajude, por favor....

#12 All

All

    Turista

  • Usuários
  • 59 posts
  • Sexo:Não informado

Posted 21/03/2008, 13:13

é possivel abrir um swf usando esse litebox ou o tickbox???
tenho uma animação para abrir somente ela na tela (escurendo o fundo assim e tal) e esse recurso seria perfeito pro q eu quero..
é possivel chamar uma swf????
Sendo q o botão q é clicado tb esta num swf (da home)???

#13 Neffertine

Neffertine

    Turista

  • Usuários
  • 27 posts
  • Sexo:Não informado

Posted 02/05/2008, 15:38

Amigo,

Acredito que com greyBox você consiga^^ (postagem dele é antiga, mas as vezes ajude até mesmo outras pessoas)
http://orangoo.com/labs/GreyBox/

#14 alyenado

alyenado

    Novato no fórum

  • Usuários
  • 20 posts
  • Sexo:Masculino

Posted 05/06/2008, 08:34

uoowwww
axei o que queria!!!

vlwww
;) ;)

#15 D...

D...

    Novato no fórum

  • Usuários
  • 24 posts
  • Sexo:Masculino

Posted 31/07/2008, 11:19

Tem como em ves de uma div abrir um iframe?




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq