Adicionar delay num bbcode

Tire suas dúvidas sobre BBCode.
Maf3r0
Novato
Novato
Mensagens: 42
Registrado em: 24 Jun 2013, 19:44

Adicionar delay num bbcode

Mensagem por Maf3r0 » 22 Fev 2014, 11:17

Qual a URL do seu fórum: http://macinpc.hostzi.com/forum
Tipo de Hospedagem: Free
Qual a versão do phpBB: phpBB 3.0.12
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: N/D Senha: N/D
Estilos instalados: subsilver2
Modificações instaladas: N/D
Qual seu nivel de experiência: Intermediário
Quando começou o problema: Não é problema, apenas uma ajuda.
Descreva seu problema: Gostaria da sugestão de pessoas mais qualificadas para tentar incrementar um bbcode que exibe uma miniatura de imagem e quando o mouse passa ela é exibida em 100%. Eis o bbcode:

Código: Selecionar todos

[imgsize]{URL}[/imgsize]

<img style="max-width:200px;" src="{URL}" onmouseover="this.style.maxWidth='100%'" onmouseout="this.style.maxWidth='200px'">
A minha dúvida é se dá para acrescentar um pequeno delay para exibição da imagem real, tipo: ao passar o mouse, um delay de 1s, para só então exibir a imagem em 100%. Na volta para miniatura o delay é desnecessário, apenas para exibição em 100%.

Já tentei de tudo: delay(5000), delay: 500, timeout function, mas não entendo essa propriedade e desisti.

É possível acrescentar essa função?

Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Adicionar delay num bbcode

Mensagem por robra » 22 Fev 2014, 20:01

Não sou programador mas uma rápida busca no Google por "onmouseover delay" trouxe vários resultados sobre a criação de um código javascript setTimeout para fazê-lo funcionar. Este código deverá ser inserido no BBcode existente.

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".

Maf3r0
Novato
Novato
Mensagens: 42
Registrado em: 24 Jun 2013, 19:44

Re: Adicionar delay num bbcode

Mensagem por Maf3r0 » 23 Fev 2014, 15:15

kkkkkkkkkkkkkk
pois é, também não sou programador e de java eu não entendo nada.
tentei usar esse "timeout" mas sem sucesso, de qualquer forma obrigado pela atenção.
abraço!

Avatar do usuário
Chico Gois
Administrador
Administrador
Mensagens: 3258
Registrado em: 03 Jul 2004, 03:53
Nome Real: Chico Gois
Localização: São Paulo - Capital
Contact:

Re: Adicionar delay num bbcode

Mensagem por Chico Gois » 23 Fev 2014, 15:50

Tenta o seguinte:

Código: Selecionar todos

<style> 
div
{
transition-property:width;
transition-duration:5s;
transition-delay:2s;

/* Safari */
-webkit-transition-property:width; 
-webkit-transition-duration:5s;
-webkit-transition-delay:2s;
}
</style>
<img style="max-width:200px;" src="{URL}" onmouseover="this.style.maxWidth='100%'" onmouseout="this.style.maxWidth='200px'">
Mais informações: http://www.w3schools.com/cssref/css3_pr ... -delay.asp
Atenciosamente,

Chico Gois
Download da tradução: CLIQUE AQUI
Não envie MP pedindo ajuda, utilize o fórum
:: Mundo phpBB ::

Maf3r0
Novato
Novato
Mensagens: 42
Registrado em: 24 Jun 2013, 19:44

Re: Adicionar delay num bbcode

Mensagem por Maf3r0 » 24 Fev 2014, 18:01

Puxa, muito obrigado Chico Goes.

O código que você postou não deu certo porque ele era destinado ao exemplo lá do site. Mas, consegui criar o bbcode graças a sua indicação: w3schools. Dei uma estudada no HTML do link e consegui entender o bendito.

O evento onmouseover me irritava bastante porque o simples fato de passar o mouse (mesmo que rápido) já ampliava/diminuia a imagem. Um saco. Agora não, com o delay a imagem só amplia quando o mouse para em cima dela — ou seja, quando eu quero mesmo ver aquela imagem.

Antes tive que dividir o bbcode entre o HTML e a folha CSS, mas o robra deu uma dica que funcionou. Agora consegui EXATAMENTE o que queria e só com o HTML, veja:

BBCode

Código: Selecionar todos

[imgsize]{URL}[/imgsize]
Substituição do HTML

Código: Selecionar todos

<img id="imgsize" src="{URL}" />
<style>
#imgsize {
   width:20%;
   height:20%;

   transition-property:width, height;
   transition-duration:0.5s;
   transition-delay:0.2s;

   /* Apenas para o Safari */
   -webkit-transition-property:width, height;
   -webkit-transition-duration:0.5s;
   -webkit-transition-delay:0.2s;
}

#imgsize:hover {
   width:100%;
   height:100%;
}
</style>
Obrigado robra e Chico Goes pela atenção prestada — mesmo em se tratando de um assunto que não diz respeito ao phpbb. Vou postar isso na sessão dos bbcodes, talvez interesse a mais alguém.

viewtopic.php?f=153&t=48755&p=290465#p290465

Abraço. Até a próxima.
Editado pela última vez por Maf3r0 em 24 Fev 2014, 22:13, em um total de 1 vez.

Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Adicionar delay num bbcode

Mensagem por robra » 24 Fev 2014, 19:56

Mas o CSS você incluiu a parte, fora do BBcode :?:
Dentro do código, ficaria desta forma:

Código: Selecionar todos

<img id="imgsize" src="{URL}" />
<style>
#imgsize {
   width:20%;
   height:20%;

   transition-property:width, height;
   transition-duration:0.5s;
   transition-delay:0.2s;

   /* Apenas para o Safari */
   -webkit-transition-property:width, height;
   -webkit-transition-duration:0.5s;
   -webkit-transition-delay:0.2s;
}

#imgsize:hover {
   width:100%;
   height:100%;
}
</style>
Testou desta forma :?:

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".

Maf3r0
Novato
Novato
Mensagens: 42
Registrado em: 24 Jun 2013, 19:44

Re: Adicionar delay num bbcode

Mensagem por Maf3r0 » 24 Fev 2014, 21:52

kkkkkkkkkkkk

e não é que deu?!

Quando eu tava testando, não consegui de jeito nenhum. Não sei se foi confusão que fiz na elaboração do código ou se foi o modo que testei — naqueles sites de edição HTML em realtime. O que importa é que agora está bem melhor usando tudo no HTML. Valeu pela diga robra.

Vou atualizar lá no post dos bbcodes, abraço.

Avatar do usuário
jhugor
Novato
Novato
Mensagens: 80
Registrado em: 12 Jun 2016, 00:06

Re: Adicionar delay num bbcode

Mensagem por jhugor » 22 Abr 2017, 21:29

olá amigos

uso a 3.2...

nao funcionou pra mim... já li tudo sobre redimensionamento de imagem, ainda tentando

alguem pode dar uma luz ?


valeu

Avatar do usuário
_Vinny_
Administrador
Administrador
Mensagens: 5693
Registrado em: 03 Set 2009, 21:59
Nome Real: Marcus Vinicius
Localização: Macapá, AP - Brasil
Contact:

Re: Adicionar delay num bbcode

Mensagem por _Vinny_ » 23 Abr 2017, 02:10

Já tentou extensão?

Responder