Adicionar delay num bbcode

[Maf3r0]

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?

[robra]

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.

[Maf3r0]

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!

[Chico Gois]

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

[Maf3r0]

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.

[robra]

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.

[Maf3r0]

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.

[jhugor]

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

[_Vinny_]

Já tentou extensão?